/* =========================================================
   Inspiration Browser — Design Tokens
   Two calm themes: warm ivory (light) + slate mist (dark).
   Single terracotta accent. No neon, no toy-dashboard colors.
   ========================================================= */

:root {
  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---- Type scale (fluid, clamp) ---- */
  --fs-display: clamp(48px, 7vw, 96px);
  --fs-h1:      clamp(34px, 4.6vw, 60px);
  --fs-h2:      clamp(24px, 2.8vw, 36px);
  --fs-h3:      clamp(18px, 1.6vw, 22px);
  --fs-body:    clamp(15px, 1.05vw, 17px);
  --fs-small:   13px;
  --fs-micro:   11px;

  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-body:  1.55;

  --tracking-display: -0.02em;
  --tracking-eyebrow: 0.18em;

  /* ---- Radius / borders ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;
  --border-thin: 1px;
  --border-hair: 0.5px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-1: 140ms;
  --dur-2: 220ms;
  --dur-3: 360ms;

  /* ---- Layout ---- */
  --maxw: 1240px;
  --gutter: clamp(20px, 4vw, 56px);
}

/* =========================================================
   Theme A — Warm Ivory (light)
   Paper-like base, ink text, single terracotta accent.
   ========================================================= */
:root,
:root[data-theme="light"] {
  --bg:       oklch(97.4% 0.012 85);   /* warm ivory */
  --surface:  oklch(99.2% 0.006 85);   /* card paper */
  --surface-2: oklch(95.2% 0.014 80);  /* sunken panel */
  --fg:       oklch(22% 0.014 60);     /* ink */
  --fg-soft:  oklch(38% 0.014 65);
  --muted:    oklch(52% 0.012 65);
  --line:     oklch(89% 0.010 80);     /* hairline */
  --line-strong: oklch(82% 0.014 75);
  --accent:   oklch(58% 0.118 42);     /* terracotta */
  --accent-soft: oklch(90% 0.050 42);
  --shadow-1: 0 1px 0 rgba(60, 40, 20, 0.04), 0 4px 14px rgba(60, 40, 20, 0.05);
  --shadow-2: 0 1px 0 rgba(60, 40, 20, 0.06), 0 18px 40px rgba(60, 40, 20, 0.10);
  --chip-bg:  oklch(95% 0.012 80);

  /* Font stacks — switchable via [data-font] */
  --font-display: "Fraunces", "Iowan Old Style", "Times New Roman", Georgia, serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --font-mono:    ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
}

:root[data-font="serif"] {
  --font-display: "Fraunces", "Iowan Old Style", "Times New Roman", Georgia, serif;
  --font-body:    "Fraunces", "Iowan Old Style", Georgia, serif;
}
:root[data-font="sans"] {
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Pretendard", system-ui, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Pretendard", "Noto Sans KR", system-ui, sans-serif;
}

/* =========================================================
   Theme B — Calm Slate (dark)
   Night ink, warm slate panels, same terracotta accent (slightly muted).
   ========================================================= */
:root[data-theme="dark"] {
  --bg:       oklch(20% 0.012 250);    /* deep slate */
  --surface:  oklch(24% 0.012 250);
  --surface-2: oklch(18% 0.012 250);
  --fg:       oklch(95% 0.008 80);
  --fg-soft:  oklch(82% 0.010 80);
  --muted:    oklch(62% 0.014 240);
  --line:     oklch(30% 0.014 245);
  --line-strong: oklch(40% 0.018 240);
  --accent:   oklch(72% 0.118 42);     /* warmer terracotta on dark */
  --accent-soft: oklch(34% 0.060 42);
  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.35), 0 6px 18px rgba(0, 0, 0, 0.30);
  --shadow-2: 0 1px 0 rgba(0, 0, 0, 0.45), 0 22px 50px rgba(0, 0, 0, 0.45);
  --chip-bg:  oklch(26% 0.012 250);
}

/* Respect user OS pref if no explicit choice */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg:       oklch(20% 0.012 250);
    --surface:  oklch(24% 0.012 250);
    --surface-2: oklch(18% 0.012 250);
    --fg:       oklch(95% 0.008 80);
    --fg-soft:  oklch(82% 0.010 80);
    --muted:    oklch(62% 0.014 240);
    --line:     oklch(30% 0.014 245);
    --line-strong: oklch(40% 0.018 240);
    --accent:   oklch(72% 0.118 42);
    --accent-soft: oklch(34% 0.060 42);
    --chip-bg:  oklch(26% 0.012 250);
  }
}