/* =============================================================
   Awwwards Signal Board · Design Tokens
   Warm ivory paper + ink/charcoal type + restrained sage/amber
   accents. Light + dark share the same token names — never
   introduce per-component color values in components.
   ============================================================= */

:root {
  /* ---------- Color · surface ---------- */
  --color-bg:        oklch(97% 0.012 85);     /* warm ivory paper */
  --color-surface:   oklch(99.2% 0.005 85);
  --color-surface-2: oklch(94% 0.018 85);
  --color-ink:       oklch(22% 0.018 45);     /* warm near-black */
  --color-ink-2:     oklch(34% 0.018 45);
  --color-muted:     oklch(46% 0.014 60);
  --color-muted-2:   oklch(60% 0.010 60);

  /* ---------- Color · accent (calm, never neon) ---------- */
  --color-accent:    oklch(38% 0.04 165);     /* deep sage/forest */
  --color-accent-2:  oklch(56% 0.13 55);      /* muted amber, used at most twice */
  --color-accent-soft:  oklch(94% 0.024 165);
  --color-accent-soft-2: oklch(95% 0.030 75);

  /* ---------- Color · rules & chips ---------- */
  --color-rule:      oklch(87% 0.012 85);
  --color-rule-soft: oklch(92% 0.010 85);
  --color-chip:      oklch(95% 0.014 85);
  --color-chip-strong: oklch(91% 0.018 85);

  /* ---------- Type ---------- */
  --font-display: "Newsreader", "Iowan Old Style", "Charter",
                  Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont,
                  "SF Pro Text", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-7xl: clamp(54px, 8.5vw, 112px);
  --fs-6xl: clamp(44px, 6.5vw, 88px);
  --fs-5xl: clamp(34px, 4.6vw, 64px);
  --fs-4xl: clamp(28px, 3vw, 40px);
  --fs-3xl: clamp(22px, 2vw, 28px);
  --fs-2xl: 20px;
  --fs-xl:  18px;
  --fs-md:  16px;
  --fs-sm:  13px;
  --fs-xs:  11px;

  --lh-tight: 1.04;
  --lh-snug:  1.22;
  --lh-body:  1.62;

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

  --max-w:    1280px;
  --gutter:   clamp(20px, 4vw, 40px);

  /* ---------- Radius ---------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ---------- Elevation (very restrained) ---------- */
  --shadow-xs: 0 1px 0 oklch(22% 0.018 45 / 0.05);
  --shadow-sm: 0 2px 6px oklch(22% 0.018 45 / 0.06);
  --shadow-md: 0 10px 30px oklch(22% 0.018 45 / 0.08);
  --shadow-lg: 0 24px 60px oklch(22% 0.018 45 / 0.10);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  color-scheme: light;
}

/* ---------- Optional font family · serif overlay ---------- */
:root[data-font="serif"] {
  --font-body: "Newsreader", "Iowan Old Style", "Charter",
               Georgia, "Times New Roman", serif;
}

/* ---------- Dark mode ---------- */
:root[data-theme="dark"] {
  --color-bg:        oklch(15% 0.012 60);
  --color-surface:   oklch(19% 0.012 60);
  --color-surface-2: oklch(23% 0.014 60);
  --color-ink:       oklch(94% 0.012 85);
  --color-ink-2:     oklch(82% 0.012 85);
  --color-muted:     oklch(68% 0.014 75);
  --color-muted-2:   oklch(54% 0.012 75);

  --color-accent:    oklch(72% 0.08 160);
  --color-accent-2:  oklch(78% 0.13 65);
  --color-accent-soft:   oklch(28% 0.022 160);
  --color-accent-soft-2: oklch(28% 0.026 75);

  --color-rule:      oklch(28% 0.014 60);
  --color-rule-soft: oklch(24% 0.014 60);
  --color-chip:      oklch(24% 0.014 60);
  --color-chip-strong: oklch(28% 0.016 60);

  --shadow-xs: 0 1px 0 oklch(0% 0 0 / 0.4);
  --shadow-sm: 0 2px 8px oklch(0% 0 0 / 0.45);
  --shadow-md: 0 10px 30px oklch(0% 0 0 / 0.55);
  --shadow-lg: 0 24px 60px oklch(0% 0 0 / 0.6);

  color-scheme: dark;
}