/* ==========================================================================
   Lantern — Design Tokens
   Calm, warm, confident. "A lantern in the dark": warm amber light against a
   deep teal-ink. Original execution — no proprietary marks or SF fonts.
   All colour pairings below target WCAG AA for their intended use.
   ========================================================================== */

:root {
  /* ---- Brand palette ---------------------------------------------------- */
  --ink: #1b2228;            /* primary text on light — ~14.9:1 on paper */
  --ink-soft: #4a555f;       /* secondary text — ~7.4:1 on paper (AA) */
  --ink-faint: #6b7681;      /* tertiary / captions — ~4.7:1 on paper (AA) */

  --paper: #fbfaf7;          /* warm off-white page background */
  --surface: #ffffff;        /* cards / raised surfaces */
  --surface-2: #f4f1ea;      /* subtle tinted panels */
  --hairline: #e7e2d8;       /* borders / dividers */

  /* Deep teal-ink — primary action colour. #16333f on white ≈ 10.8:1 (AA/AAA) */
  --teal-900: #0f2730;
  --teal-800: #16333f;
  --teal-700: #1f4653;
  --teal-500: #2f6675;

  /* Warm amber — the "lantern glow". Decorative / accent only; amber text on
     light backgrounds does not reliably meet AA, so it is never used for body
     copy. Amber-ink (--amber-ink) is the AA-safe variant for small accents. */
  --amber-300: #f6c874;
  --amber-400: #efab4a;
  --amber-500: #e08a2b;
  --amber-600: #b96d18;      /* amber-ink: #b96d18 on white ≈ 4.6:1 (AA) */
  --amber-ink: #9a5a10;      /* stronger amber text — ≈ 6.0:1 (AA) */

  --glow: radial-gradient(
    120% 120% at 50% 0%,
    rgba(246, 200, 116, 0.55) 0%,
    rgba(239, 171, 74, 0.18) 38%,
    rgba(239, 171, 74, 0) 70%
  );

  /* Semantic */
  --focus: #2f6675;
  --focus-ring: 0 0 0 3px rgba(47, 102, 117, 0.35);
  --note-bg: #fbf4e6;        /* honesty / disclaimer callout background */
  --note-border: #e9d19b;

  /* ---- Typography ------------------------------------------------------- */
  /* Freely-licensable (OFL) fonts with robust system fallbacks. */
  --font-display: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace;

  /* Fluid modular type scale (min .. max via viewport). */
  --step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.94rem);
  --step-0:  clamp(1rem, 0.95rem + 0.24vw, 1.13rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.5rem);
  --step-2:  clamp(1.44rem, 1.3rem + 0.7vw, 2rem);
  --step-3:  clamp(1.73rem, 1.5rem + 1.15vw, 2.66rem);
  --step-4:  clamp(2.07rem, 1.7rem + 1.85vw, 3.55rem);
  --step-5:  clamp(2.49rem, 1.9rem + 2.95vw, 4.6rem);

  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-normal: 1.6;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* ---- Spacing scale (4px base) ---------------------------------------- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6.5rem;
  --space-5xl: 9rem;

  /* ---- Layout ----------------------------------------------------------- */
  --container: 76rem;        /* ~1216px */
  --container-narrow: 46rem; /* readable prose measure */
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(3.5rem, 8vw, 7rem);

  /* ---- Radii ------------------------------------------------------------ */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-pill: 999px;

  /* ---- Elevation -------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(27, 34, 40, 0.05), 0 1px 3px rgba(27, 34, 40, 0.06);
  --shadow-md: 0 4px 14px rgba(27, 34, 40, 0.08), 0 2px 6px rgba(27, 34, 40, 0.05);
  --shadow-lg: 0 18px 48px rgba(15, 39, 48, 0.14), 0 6px 16px rgba(15, 39, 48, 0.08);
  --shadow-amber: 0 20px 60px rgba(224, 138, 43, 0.22);

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;

  --z-nav: 100;
  --z-overlay: 200;
}

/* Respect reduced-transparency by keeping a solid fallback where needed. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
}