/* ============================================================================
 * New Apollo marketing site — design-tokens.css
 * Canonical source: C:\Code\new-apollo\apps\web\src\index.css (Apollo @theme block).
 * Loaded BEFORE the inline <style> block in index.html and pnaa2026/index.html
 * so the alias layer in :root can resolve var(--color-*) references.
 *
 * IMPORTANT: this file is the brand foundation only. It does NOT contain
 *   - @font-face (Google Fonts CDN handles loading)
 *   - [data-surface] / [data-density] scopes
 *   - --color-interactive-* / --color-state-* tokens
 *   - --color-text-* semantic tokens (marketing declares locally per page)
 *   - utility classes (.t-display, .tabular, .mono)
 *   - base html/body declarations (would clobber the marketing site)
 * ========================================================================== */

:root {
  /* ===== Brand primitives ===== */
  --color-starry-navy:        #081a49;
  --color-ion-blue:           #1667c1;
  --color-stellar-white:      #ffffff;
  --color-deep-space-black:   #0b0d19;
  --color-thruster-gold:      #ffc857;
  --color-moondust-silver:    #d6d0c8;
  --color-aurora-violet:      #6d5bc9;
  --color-apogee-green:       #2dac7c;
  --color-launch-orange:      #ff9244;
  --color-rocket-red:         #d64444;
  --color-orbit-grey:         #a89e94;
  --color-skybeam-teal:       #13a4c2;

  /* ===== Brand primitive channel-split companions (R G B, space-separated)
     Use with: rgb(var(--color-foo-rgb) / 0.4) — CSS Color Module Level 4. ===== */
  --color-starry-navy-rgb:        8 26 73;
  --color-ion-blue-rgb:            22 103 193;
  --color-stellar-white-rgb:       255 255 255;
  --color-deep-space-black-rgb:    11 13 25;
  --color-thruster-gold-rgb:       255 200 87;
  --color-aurora-violet-rgb:       109 91 201;
  --color-launch-orange-rgb:       255 146 68;
  --color-rocket-red-rgb:          214 68 68;
  --color-skybeam-teal-rgb:        19 164 194;

  /* ===== Marketing-only extensions — NOT in the design system =====
     These exist to preserve visual fidelity in marketing layouts.
     Reconcile to the design system in a follow-up pass after marketing is stable. */
  --color-starry-navy-light:       #0d2460;
  --color-starry-navy-light-rgb:   13 36 96;
  --color-earthrise-green:         #4ade80;
  --color-earthrise-green-rgb:     74 222 128;
  /* DRIFT: marketing-only — DS canonical is --color-orbit-grey #a89e94.
     Reconcile in a follow-up pass; do not delete until brand owner approves
     the cool→warm tint shift (search this string to find the tracking site). */
  --color-orbit-grey-marketing:    #9aa4b2;
  /* DRIFT: marketing-only — DS canonical is --color-moondust-silver #d6d0c8.
     Reconcile in a follow-up pass; do not delete until brand owner approves
     the cool→warm tint shift (search this string to find the tracking site). */
  --color-silver-marketing:        #d1d6dc;

  /* ===== Status tones (display only — never as button fills) =====
     Only --color-status-active is consumed by marketing today (nav indicator hover).
     Other status tones (complete, positive, attention, negative, inactive) were
     trimmed; recoverable from git history if marketing adopts status badges. */
  --color-status-active:    var(--color-ion-blue);  /* future-use: status badges, indicators */

  /* ===== Mission gradient + thruster — future-use: hero treatments, progress bars ===== */
  --gradient-mission: radial-gradient(120% 90% at 14% 8%,
      rgb(var(--color-skybeam-teal-rgb) / 0.42), transparent 62%),
    radial-gradient(100% 80% at 100% 100%,
      rgb(var(--color-skybeam-teal-rgb) / 0.28), transparent 65%);
  --gradient-thruster: linear-gradient(135deg,
      var(--color-thruster-gold), var(--color-launch-orange));

  /* ===== Focus — consumed by :focus-visible rules on both pages ===== */
  --color-ring:           #004d9d;
  --focus-ring-width:     2px;
  --focus-ring-offset:    2px;

  /* ===== Font stacks ===== */
  --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Monaco, Consolas,
    'Cascadia Code', 'Liberation Mono', 'Courier New', monospace;

  /* ===== Radius — matches Apollo canonical (8 / 12 / 16) and marketing baseline ===== */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ===== Shadow — atmospheric teal cast — future-use: elevation in marketing surfaces ===== */
  --shadow-xs: 0 1px 1px  oklch(0.3 0.04 216 / 0.06);
  --shadow-sm: 0 1px 2px  oklch(0.3 0.03 216 / 0.10);
  --shadow-md: 0 4px 12px oklch(0.3 0.04 216 / 0.13);
  --shadow-lg: 0 12px 32px oklch(0.3 0.05 216 / 0.18);
  --shadow-modal:
    0 8px  24px oklch(0.3 0.07 216 / 0.18),
    0 24px 64px oklch(0.3 0.09 216 / 0.20);

  /* ===== Motion — micro tier (consumed by marketing --duration-normal alias) ===== */
  --duration-fast:   150ms;
  --duration-base:   200ms;
  --duration-slow:   300ms;

  /* ===== Motion — cinematic tier — future-use: surface transitions, celebration pulses ===== */
  --duration-surface-arrive:    720ms;
  --duration-surface-recede:    820ms;
  --duration-celebration-pulse: 600ms;

  --ease-standard:          cubic-bezier(0.2, 0, 0.2, 1);
  --ease-emphasized:        cubic-bezier(0.4, 0, 0,   1);
  --ease-surface-arrive:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-surface-recede:    cubic-bezier(0.32, 0, 0.4, 1);
  --ease-celebration-pulse: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-surface-arrive: 0ms;
    --duration-surface-recede: 0ms;
    --duration-celebration-pulse: 0ms;
  }
}