/* ==========================================================================
   BIG SKY FPV 2.0 — Design Tokens
   Source of truth: strategy/DESIGN_SYSTEM.md
   Every component consumes these variables. No hardcoded values in components.
   ========================================================================== */

:root {
  /* ---- Color: ink scale (dark cinematic) -------------------------------- */
  --ink-950: #07090D;            /* page background */
  --ink-900: #0B0F16;            /* section alternation, cards */
  --ink-800: #111826;            /* elevated surfaces, nav on scroll */
  --ink-700: #1A2333;            /* borders-strong, hover surfaces */
  --line: rgba(35, 46, 66, 0.6); /* hairline telemetry rules */

  /* ---- Color: text ------------------------------------------------------- */
  --text-primary: #F2F5F9;
  --text-secondary: #9FB0C7;
  --text-tertiary: #5C6B82;

  /* ---- Color: accent (LED blue — max ~5% of any viewport) ---------------- */
  --accent: #4DA6FF;
  --accent-deep: #1E6FD9;
  --signal-ok: #3ECF8E;

  /* ---- Scrim (only permitted gradient: legibility over footage) ---------- */
  --scrim-hero: linear-gradient(to top, rgba(7, 9, 13, 0.85) 0%, rgba(7, 9, 13, 0.35) 45%, rgba(7, 9, 13, 0) 100%);

  /* ---- Typography -------------------------------------------------------- */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* type scale — desktop (mobile overrides below) */
  --display-xl: 4.5rem;   /* homepage hero only */
  --display-l: 3rem;      /* page heroes (h1) */
  --heading-l: 2rem;      /* section titles (h2) */
  --heading-m: 1.375rem;  /* card titles (h3) */
  --body-l: 1.125rem;     /* lead paragraphs */
  --body: 1rem;
  --mono-label: 0.8125rem;

  --leading-tight: 1.1;
  --leading-body: 1.65;
  --tracking-label: 0.08em;
  --measure-max: 68ch;

  /* ---- Spacing (8px base) ------------------------------------------------ */
  --space-1: 0.5rem;   /*   8 */
  --space-2: 1rem;     /*  16 */
  --space-3: 1.5rem;   /*  24 */
  --space-4: 2.5rem;   /*  40 */
  --space-5: 4rem;     /*  64 */
  --space-6: 6rem;     /*  96 */
  --space-7: 9rem;     /* 144 */

  --section-gap: var(--space-6);      /* homepage rhythm — tightened per design review */
  --section-gap-inner: 4.5rem;        /* inner pages */

  /* ---- Layout ------------------------------------------------------------ */
  --container-max: 1320px;
  --gutter: 24px;
  --radius: 2px;                      /* sharp = technical */

  /* ---- Motion (gimbal easing — nothing bounces) -------------------------- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-micro: 150ms;
  --t-standard: 300ms;
  --t-reveal: 600ms;
  --reveal-shift: 24px;
  --stagger: 60ms;

  /* ---- Z-index ------------------------------------------------------------ */
  --z-wake: 0;      /* cursor field sits behind content */
  --z-content: 1;
  --z-nav: 100;
  --z-overlay: 200;
}

/* ---- Mobile scale overrides ---------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --display-xl: 2.5rem;
    --display-l: 2rem;
    --heading-l: 1.5rem;
    --heading-m: 1.25rem;
    --gutter: 16px;
    --section-gap: var(--space-5);
    --section-gap-inner: var(--space-5);
  }
}

/* ---- Reduced motion: budgets doc §2 — honored with dignity ---------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-micro: 0ms;
    --t-standard: 0ms;
    --t-reveal: 0ms;
    --reveal-shift: 0px;
    --stagger: 0ms;
  }
}