/* ============================================================
   Atlas Integrated — Design Tokens
   ============================================================
   OKLCH color tokens use the double-declaration fallback pattern:
   the hex value is declared FIRST, then the OKLCH value SECOND.
   Browsers that don't parse OKLCH (Safari < 15.4) keep the hex.
   Do not reverse the order — Safari will read the unparsable
   second declaration as invalid and discard the first.
   ============================================================ */

:root {
  color-scheme: light only;

  /* ---- Color: brand primitives ---- */
  --color-navy:        #1f3356;
  --color-navy:        oklch(28% 0.06 250);
  --color-navy-deep:   #152138;
  --color-navy-deep:   oklch(20% 0.04 250);
  --color-surface:     #f7f4ec;
  --color-surface:     oklch(96% 0.022 85);
  --color-ink:         #152138;
  --color-ink:         oklch(20% 0.04 250);
  --color-muted:       #5b6478;
  --color-muted:       oklch(45% 0.03 250);
  --color-faint:       #8a92a3;
  --color-faint:       oklch(62% 0.025 250);
  --color-gold:        #b8954a;
  --color-gold:        oklch(70% 0.10 80);
  --color-gold-soft:   #c8a866;
  --color-gold-soft:   oklch(76% 0.09 82);
  --color-border:      rgba(31, 51, 86, 0.12);
  --color-border:      oklch(28% 0.06 250 / 0.12);
  --color-border-strong: rgba(31, 51, 86, 0.22);
  --color-border-strong: oklch(28% 0.06 250 / 0.22);

  /* ---- Color: semantic aliases (components consume these) ---- */
  --bg-page:            var(--color-surface);
  --bg-elevated:        var(--color-surface);
  --bg-nav:             transparent;
  --bg-nav-scrolled:    rgba(247, 244, 236, 0.88);
  --fg-body:            var(--color-ink);
  --fg-muted:           var(--color-muted);
  --fg-faint:           var(--color-faint);
  --fg-accent:          var(--color-gold);
  --fg-inverse:         var(--color-surface);
  --stroke-globe:       #1f3356;
  --stroke-globe:       oklch(28% 0.06 250);
  --stroke-globe-soft:  rgba(31, 51, 86, 0.55);
  --stroke-globe-soft:  oklch(28% 0.06 250 / 0.55);
  --stroke-orbit:       rgba(31, 51, 86, 0.28);
  --stroke-orbit:       oklch(28% 0.06 250 / 0.28);
  --btn-primary-bg:     var(--color-navy);
  --btn-primary-fg:     var(--color-surface);
  --btn-primary-bg-hover: #152138;
  --btn-primary-bg-hover: oklch(20% 0.04 250);
  --focus-ring:         rgba(184, 149, 74, 0.55);
  --focus-ring:         oklch(70% 0.10 80 / 0.55);

  /* ---- Type: families ---- */
  --font-display:       'Erode', Georgia, 'Times New Roman', serif;
  --font-body:          'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Type: weights ---- */
  --fw-regular:         400;
  --fw-medium:          500;
  --fw-semi:            600;
  --fw-bold:            700;

  /* ---- Type: scale (display) ---- */
  --fs-display-xl:      clamp(3.5rem, 8vw, 7.5rem);   /* hero "Atlas" */
  --fs-display-l:       clamp(2.75rem, 5vw, 4.5rem);
  --fs-display-m:       clamp(2rem, 3.5vw, 3rem);
  --fs-display-s:       clamp(1.5rem, 2.5vw, 2rem);

  /* ---- Type: scale (body) ---- */
  --fs-body-xl:         1.375rem;
  --fs-body-lg:         1.125rem;
  --fs-body:            1rem;
  --fs-body-sm:         0.875rem;
  --fs-caption:         0.75rem;
  --fs-micro:           0.6875rem;

  /* ---- Type: leading ---- */
  --lh-tight:           1.05;
  --lh-snug:            1.2;
  --lh-body:            1.55;
  --lh-loose:           1.75;

  /* ---- Type: tracking ---- */
  --tracking-display:   -0.025em;
  --tracking-display-tight: -0.04em;
  --tracking-body:      0;
  --tracking-caption:   0.04em;
  --tracking-eyebrow:   0.18em;

  /* ---- Space (8px rhythm) ---- */
  --space-0:            0;
  --space-1:            0.25rem;   /* 4 */
  --space-2:            0.5rem;    /* 8 */
  --space-3:            0.75rem;   /* 12 */
  --space-4:            1rem;      /* 16 */
  --space-5:            1.5rem;    /* 24 */
  --space-6:            2rem;      /* 32 */
  --space-7:            3rem;      /* 48 */
  --space-8:            4rem;      /* 64 */
  --space-9:            6rem;      /* 96 */
  --space-10:           8rem;      /* 128 */
  --space-11:           12rem;     /* 192 */

  /* ---- Containers & gutters ---- */
  --container-sm:       640px;
  --container-md:       960px;
  --container-lg:       1200px;
  --container-xl:       1440px;
  --gutter:             clamp(1.25rem, 4vw, 2.5rem);

  /* ---- Motion ---- */
  --ease-cinematic:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-card:          cubic-bezier(0.16, 1, 0.3, 1);
  --ease-linear:        linear;
  --ease-smooth:        cubic-bezier(0.4, 0, 0.2, 1);
  --dur-intro:          1800ms;
  --dur-card:           180ms;
  --dur-reveal:         400ms;
  --dur-stagger:        150ms;
  --dur-text-stagger:   300ms;
  --dur-globe-spin:     20s;
  --intro-hold:         600ms;
  --intro-text-start:   900ms;     /* relative to page load */

  /* ---- Z layers ---- */
  --z-globe-back:       1;
  --z-globe:            2;
  --z-globe-front:      3;
  --z-hero-text:        4;
  --z-nav:              50;
  --z-overlay:          100;
  --z-toast:            200;

  /* ---- Radius ---- */
  --radius-none:        0;
  --radius-sm:          2px;
  --radius-md:          4px;
  --radius-lg:          8px;
  --radius-pill:        999px;

  /* ---- Strokes for SVG geometry ---- */
  --stroke-edge:        2.5;
  --stroke-meridian:    2;
  --stroke-parallel:    1.8;
  --stroke-orbit-w:     0.5;
}