/* tokens.css — design foundation. Lighthouse / precision-instrument.
   Warm ink + brass-amber + verdigris patina + cream.
   No Inter/Roboto, no AI-purple, no pure #000, no garish neon. */

:root {
  /* ---- type ---- */
  --font-display: 'Clash Display', 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Satoshi', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.86rem);
  --step-0:  clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  --step-1:  clamp(1.18rem, 1.05rem + 0.6vw, 1.45rem);
  --step-2:  clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem);
  --step-3:  clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem);
  --step-4:  clamp(2.8rem, 2rem + 4vw, 5.2rem);

  /* ---- spacing ---- */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4.5rem;

  --radius-s: 10px; --radius-m: 16px; --radius-l: 24px; --radius-xl: 32px; --radius-pill: 999px;

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 0.16s; --dur-2: 0.3s; --dur-3: 0.6s; --dur-4: 1s;

  --maxw: 960px;
}

/* ---- dark (default) ---- */
:root, [data-theme='dark'] {
  --ink-900: #0a0907;   /* page (warm near-black) */
  --ink-850: #0e0c0a;
  --ink-800: #141009;   /* raised */
  --ink-750: #1a160f;
  --ink-700: #211b13;   /* card */
  --ink-600: #2c251a;   /* card hi */
  --hairline: rgba(246, 233, 210, 0.10);
  --hairline-strong: rgba(246, 233, 210, 0.17);
  --hairline-soft: rgba(246, 233, 210, 0.05);

  --fog-100: #f6efe1;   /* high text (warm cream) */
  --fog-300: #c4baa6;   /* secondary */
  --fog-500: #8b8270;   /* muted */
  --fog-700: #534b3e;   /* faint */

  --amber: #e9ad6b;     /* brass / lamp light */
  --amber-bright: #f7c388;
  --amber-deep: #c4824a;
  --amber-dim: rgba(233, 173, 107, 0.13);
  --amber-line: rgba(233, 173, 107, 0.34);
  --amber-glow: rgba(247, 195, 136, 0.42);

  --patina: #74b8a9;    /* verdigris — secondary / success */
  --patina-dim: rgba(116, 184, 169, 0.14);
  --danger: #e0916f;    /* warm terracotta */
  --danger-dim: rgba(224, 145, 111, 0.14);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 24px 64px -28px rgba(0, 0, 0, 0.85), 0 6px 18px -10px rgba(0, 0, 0, 0.6);
  --inner-hi: inset 0 1px 0 rgba(255, 240, 220, 0.07);
  --glass: rgba(14, 11, 8, 0.66);
  --surface-grad: linear-gradient(168deg, rgba(255,240,214,0.045), rgba(255,240,214,0) 42%);

  color-scheme: dark;
}

/* ---- light (nautical chart / warm paper) ---- */
[data-theme='light'] {
  --ink-900: #efe6d3;
  --ink-850: #e9dfc9;
  --ink-800: #fcf8ee;
  --ink-750: #f6efe0;
  --ink-700: #f3ead8;
  --ink-600: #ebe0ca;
  --hairline: rgba(58, 44, 22, 0.13);
  --hairline-strong: rgba(58, 44, 22, 0.2);
  --hairline-soft: rgba(58, 44, 22, 0.06);

  --fog-100: #211a10;
  --fog-300: #574d3c;
  --fog-500: #7e7461;
  --fog-700: #a99e88;

  --amber: #b06a24;
  --amber-bright: #98591a;
  --amber-deep: #8a4f18;
  --amber-dim: rgba(176, 106, 36, 0.12);
  --amber-line: rgba(176, 106, 36, 0.34);
  --amber-glow: rgba(176, 106, 36, 0.28);

  --patina: #2f7d6e;
  --patina-dim: rgba(47, 125, 110, 0.13);
  --danger: #c0573f;
  --danger-dim: rgba(192, 87, 63, 0.12);

  --shadow-1: 0 1px 2px rgba(60, 45, 20, 0.08);
  --shadow-2: 0 24px 60px -30px rgba(60, 45, 20, 0.3), 0 5px 16px -10px rgba(60, 45, 20, 0.18);
  --inner-hi: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --glass: rgba(252, 248, 238, 0.74);
  --surface-grad: linear-gradient(168deg, rgba(255,255,255,0.6), rgba(255,255,255,0) 46%);

  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}