/* ==========================================================================
   Lantern — Design Tokens
   "A lantern in the dark": a warm amber ember against deep ink. Calm, warm,
   confident, clinical-grade. Own execution — no proprietary marks or SF fonts.
   Colour pairings target WCAG AA for their intended use.
   ========================================================================== */

:root {
  /* ---- Brand palette ---------------------------------------------------- */
  /* Deep ink — the brand's grounding dark (#173540). ~12.4:1 on paper. */
  --ink: #173540;            /* primary text + brand dark */
  --ink-soft: #46585f;       /* secondary text — ~7.0:1 on paper (AA) */
  --ink-faint: #667579;      /* tertiary / captions — ~4.6:1 on paper (AA) */

  --paper: #fbfaf7;          /* warm off-white page background */
  --paper-2: #f6f3ec;        /* faintly warmer band */
  --surface: #ffffff;        /* cards / raised surfaces */
  --surface-2: #f3efe6;      /* subtle tinted panels */
  --hairline: #e7e1d5;       /* borders / dividers */
  --hairline-soft: #efeade;

  /* Deep-ink ramp — primary action + dark sections. */
  --ink-900: #0e242c;
  --ink-800: #173540;        /* == --ink, the brand dark */
  --ink-700: #23505f;
  --ink-500: #3c7284;

  /* legacy aliases (kept so existing rules resolve to the new ink ramp) */
  --teal-900: var(--ink-900);
  --teal-800: var(--ink-800);
  --teal-700: var(--ink-700);
  --teal-500: var(--ink-500);

  /* Warm amber — the "lantern ember". Accent + glow only; amber text on light
     backgrounds is never used for body copy (use --amber-ink for small text). */
  --amber-300: #ffc978;      /* glow highlight */
  --amber-400: #ffb65c;
  --amber-500: #f59e2e;      /* the ember — primary accent */
  --amber-600: #d97d13;
  --amber-ink: #9a5a10;      /* AA-safe amber text — ≈ 6.0:1 on white */

  --glow: radial-gradient(
    120% 120% at 50% 0%,
    rgba(255, 201, 120, 0.62) 0%,
    rgba(245, 158, 46, 0.20) 40%,
    rgba(245, 158, 46, 0) 72%
  );

  /* Semantic */
  --focus: #3c7284;
  --focus-ring: 0 0 0 3px rgba(60, 114, 132, 0.38);
  --note-bg: #fdf5e7;        /* honesty / disclaimer callout background */
  --note-border: #f0d9a6;

  /* ---- Typography ------------------------------------------------------- */
  /* Poppins (display) + Inter (body) — freely-licensable, robust fallbacks. */
  --font-display: 'Poppins', 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.35rem);
  --step-5:  clamp(2.4rem, 1.9rem + 2.7vw, 4.3rem);

  --leading-tight: 1.06;
  --leading-snug: 1.28;
  --leading-normal: 1.62;
  --tracking-tight: -0.022em;
  --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(4rem, 8.5vw, 8rem);

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

  /* ---- Elevation -------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(23, 53, 64, 0.05), 0 1px 3px rgba(23, 53, 64, 0.05);
  --shadow-md: 0 6px 20px rgba(23, 53, 64, 0.08), 0 2px 6px rgba(23, 53, 64, 0.05);
  --shadow-lg: 0 22px 60px rgba(14, 36, 44, 0.16), 0 8px 20px rgba(14, 36, 44, 0.08);
  --shadow-xl: 0 40px 90px rgba(14, 36, 44, 0.22), 0 12px 30px rgba(14, 36, 44, 0.10);
  --shadow-amber: 0 22px 60px rgba(245, 158, 46, 0.28);

  /* ---- 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;
  }
}