/* =========================================================================
   Startup OS — Design Tokens
   Section 5.2 of the playbook. These are the ONLY color sources of truth.
   If you need a new color, add it here — never inline hex in component code.
   ========================================================================= */

:root {
  /* ---- Base · deep, serious ---- */
  --ink-900: #030508;        /* near-black, primary bg */
  --ink-800: #060b10;
  --ink-700: #0a1218;
  --ink-600: #111b22;
  --ink-500: #1a252d;        /* card bg */
  --ink-400: #2a3640;        /* dividers, borders */
  --ink-300: #3d4d57;        /* subtle outlines */

  /* ---- Core brand · ReimburseOS teal, amplified ---- */
  --teal-deep: #040e0c;
  --teal-core: #2ee8c0;      /* primary CTA, core brand */
  --teal-glow: #4df4d0;      /* hover, highlights */
  --cyan-bright: #4de2ff;    /* secondary accent */
  --ocean: #0ea5e9;          /* links, progress */

  /* ---- Energy · amber, warm counterweight to teal ---- */
  --amber-core: #f5a93a;     /* critical CTAs, alerts */
  --amber-glow: #ffc56a;
  --gold-deep: #b97a18;
  --flame-orange: #ff6b35;

  /* ---- Signal colors ---- */
  --success: #00e6af;
  --warning: #ffc56a;
  --danger: #ff5577;
  --info: #4de2ff;

  /* ---- Text ---- */
  --text-primary: #e8f4f1;
  --text-secondary: #8fa5a0;
  --text-tertiary: #5a6d6a;
  --text-ember: #2ee8c0;     /* AI voice color */
  --text-inverse: #030508;

  /* ---- Gradients · signature, use sparingly ---- */
  --grad-flame: linear-gradient(135deg, #f5a93a 0%, #ff6b35 40%, #2ee8c0 100%);
  --grad-ocean: linear-gradient(135deg, #2ee8c0 0%, #4de2ff 50%, #0ea5e9 100%);
  --grad-night: linear-gradient(180deg, #030508 0%, #0a1218 100%);
  --grad-aurora: radial-gradient(ellipse at top, rgba(46,232,192,0.15), transparent 60%),
                 radial-gradient(ellipse at bottom right, rgba(77,226,255,0.10), transparent 60%);
  --grad-teal-fade: linear-gradient(180deg, rgba(46,232,192,0.12) 0%, rgba(46,232,192,0) 100%);

  /* ---- Type stacks ---- */
  --font-display: 'Instrument Serif', 'Times New Roman', serif;
  --font-heading: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Type scale ---- */
  --text-xxs: 0.6875rem;     /* 11px — micro-meta */
  --text-xs: 0.75rem;        /* 12px — meta */
  --text-sm: 0.875rem;       /* 14px — dense UI */
  --text-base: 1rem;         /* 16px — body */
  --text-md: 1.125rem;       /* 18px */
  --text-lg: 1.375rem;       /* 22px — section */
  --text-xl: 1.75rem;        /* 28px — page */
  --text-2xl: 2.25rem;       /* 36px — hero */
  --text-3xl: 3rem;          /* 48px — marquee */
  --text-4xl: 4.5rem;        /* 72px — cinematic */
  --text-5xl: 7rem;          /* 112px — countdown display */

  /* ---- Spacing · 4px grid ---- */
  --space-1: 0.25rem;        /* 4 */
  --space-2: 0.5rem;         /* 8 */
  --space-3: 0.75rem;        /* 12 */
  --space-4: 1rem;           /* 16 */
  --space-5: 1.25rem;        /* 20 */
  --space-6: 1.5rem;         /* 24 */
  --space-8: 2rem;           /* 32 */
  --space-10: 2.5rem;        /* 40 */
  --space-12: 3rem;          /* 48 */
  --space-16: 4rem;          /* 64 */
  --space-20: 5rem;          /* 80 */
  --space-24: 6rem;          /* 96 */

  /* ---- Radius ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ---- Elevation (soft, not shadowy) ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.15);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.2);
  --shadow-lg: 0 12px 28px rgba(0,0,0,0.35), 0 4px 10px rgba(0,0,0,0.25);
  --shadow-glow-teal: 0 0 32px rgba(46,232,192,0.25);
  --shadow-glow-amber: 0 0 32px rgba(245,169,58,0.25);

  /* ---- Motion ---- */
  --dur-fast: 80ms;
  --dur-base: 180ms;
  --dur-slow: 320ms;
  --dur-deliberate: 560ms;
  --dur-cinematic: 1200ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.4, 1);
  --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Layout ---- */
  --rail-width: 232px;
  --rail-collapsed: 72px;
  --topbar-height: 56px;
  --ember-drawer-width: 420px;
  --max-content: 1440px;

  /* ---- Z-index scale ---- */
  --z-base: 1;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-nav: 500;
  --z-drawer: 800;
  --z-modal: 1000;
  --z-palette: 1100;
  --z-toast: 1200;
  --z-intro: 9999;
}

/* Reduced motion override — Section 15.2 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 80ms;
    --dur-slow: 80ms;
    --dur-deliberate: 120ms;
    --dur-cinematic: 180ms;
  }
}