/* ============================================================
   THE ATLAS — Design Tokens
   Verbatim from 23_Design/design_system.md (the contract).
   ============================================================ */
:root {
  /* ---- Base / surfaces (cinematic near-black) ---- */
  --void:        #08080A;
  --abyss:       #0B0B0E;
  --ink-900:     #101013;
  --ink-800:     #16161B;
  --ink-700:     #232229;  /* hairlines, dividers */
  --ink-600:     #34333C;

  /* ---- Text (warm cream, never pure white) ---- */
  --parchment:   #EAE3CF;
  --parchment-2: #C7C1B2;  /* secondary text — brightened for readability */
  --parchment-3: #A39E8E;  /* small labels/captions — ~6.2:1 on near-black, clearly legible */
  --parchment-4: #7C776C;  /* faint hints only — ~3.6:1, large text */

  /* ---- Accent 1: warm gilt gold (the lamp) ---- */
  --gold-100:    #F0D59A;
  --gold:        #C9A24B;
  --gold-600:    #9C7C36;
  --gold-glow:   rgba(201, 162, 75, 0.22);

  /* ---- Accent 2: verdigris / patina teal (the cool counter-voice) ---- */
  --teal-100:    #A7E0CE;
  --teal:        #3FA789;
  --teal-600:    #2A6E5C;
  --teal-glow:   rgba(63, 167, 137, 0.18);

  /* ---- Rare signal ---- */
  --ember:       #C75B39;

  /* ---- Gradients ---- */
  --grad-aurora:   radial-gradient(120% 120% at 50% -10%,
                     #14131A 0%, #0E0D12 40%, #08080A 100%);
  --grad-gold:     linear-gradient(135deg, #F0D59A 0%, #C9A24B 48%, #9C7C36 100%);
  --grad-teal:     linear-gradient(135deg, #A7E0CE 0%, #3FA789 50%, #2A6E5C 100%);
  --grad-hairline: linear-gradient(90deg, transparent 0%,
                     rgba(201,162,75,0.5) 50%, transparent 100%);
  --grad-veil:     linear-gradient(180deg, rgba(8,8,10,0) 0%,
                     rgba(8,8,10,0.85) 70%, #08080A 100%);

  /* ---- Typography (Illumination direction) ----
     Display = Fraunces (editorial serif, mixed-case — the reading voice),
     Body = Sora, Mono = Space Mono (eyebrows/labels),
     Chrome = Chakra Petch, kept only for the logotype wordmark. */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Sora', system-ui, -apple-system, sans-serif;
  --font-serif:   'Fraunces', Georgia, 'Times New Roman', serif;
  --font-mono:    'Space Mono', ui-monospace, 'SF Mono', monospace;
  --font-chrome:  'Chakra Petch', system-ui, -apple-system, sans-serif;

  --t-display: clamp(3rem, 11vw, 9rem);
  --t-h1:      clamp(2.1rem, 5.5vw, 4.2rem);
  --t-h2:      clamp(1.5rem, 3.2vw, 2.6rem);
  --t-h3:      clamp(1.15rem, 2vw, 1.5rem);
  --t-lead:    clamp(1.05rem, 1.5vw, 1.3rem);
  --t-body:    1.0625rem;
  --t-small:   0.875rem;
  --t-eyebrow: 0.75rem;

  /* ---- Motion ---- */
  --ease-rise:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-drift:  cubic-bezier(0.45, 0, 0.15, 1);
  --ease-magnet: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-veil:   cubic-bezier(0.65, 0, 0.35, 1);

  --dur-quick:  240ms;
  --dur-base:   520ms;
  --dur-slow:   900ms;
  --dur-breath: 8000ms;

  /* ---- Spacing ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 40px; --space-7: 64px; --space-8: 104px; --space-9: 168px;

  /* ---- Radius ---- */
  --r-sm: 4px;   --r-md: 8px;   --r-lg: 14px;   --r-xl: 22px;   --r-pill: 999px;

  /* ---- Shadow & glow ---- */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 8px 30px rgba(0,0,0,0.5);
  --shadow-3: 0 20px 60px rgba(0,0,0,0.6);
  --glow-gold: 0 0 0 1px var(--gold-glow), 0 0 28px var(--gold-glow);
  --glow-teal: 0 0 0 1px var(--teal-glow), 0 0 24px var(--teal-glow);
  --ring-focus: 0 0 0 2px var(--abyss), 0 0 0 4px var(--gold);

  /* ---- Layout ---- */
  --content-max: 1200px;
  --header-h: 72px;
}