/* Crux V5 — Design Tokens
 * Approved brand only (R2): Navy #1a2660, Blue #34469d, Yellow #FFDA00; Bebas Neue / IBM Plex Mono / DM Sans.
 * Components consume SEMANTIC tokens only — never raw values.
 * Source of truth: Wave_1_Foundation_Planning/V5_DESIGN_TOKEN_PROPOSAL.md
 */

:root {
  /* ---------- Primitive: Navy family ---------- */
  --navy-950: #0f1740;   /* deepest surface / overlays (derived) */
  --navy-900: #1a2660;   /* [approved] base canvas */
  --navy-800: #243380;   /* [in-use] paper-mid */
  --navy-700: #2b3a86;   /* raised surface / hover (derived) */

  /* ---------- Primitive: Blue family ---------- */
  --blue-600: #34469d;   /* [approved] */
  --blue-500: #4557b0;   /* hover/lighter (derived) */

  /* ---------- Primitive: Yellow family ---------- */
  --yellow-500: #FFDA00; /* [approved] */
  --yellow-600: #E6C400; /* hover/darker (derived) */

  /* ---------- Primitive: Neutrals ---------- */
  --white: #FFFFFF;
  --alpha-92: rgba(255,255,255,0.92);
  --alpha-82: rgba(255,255,255,0.82); /* muted (raised for AA, see adjustment log) */
  --alpha-70: rgba(255,255,255,0.70); /* dim, non-essential */
  --alpha-10: rgba(255,255,255,0.10); /* line */
  --alpha-06: rgba(255,255,255,0.06);
  --yellow-alpha-28: rgba(255,218,0,0.28);

  /* ---------- Primitive: Status ---------- */
  --green-500: #00c853;
  --amber-500: #FFB300;
  --red-500:   #FF5A52;

  /* ---------- Primitive: Blueprint grid (retained identity) ---------- */
  --bp-line-major: rgba(255,218,0,0.07);
  --bp-line-minor: rgba(255,255,255,0.025);
  --bp-size-major: 120px;
  --bp-size-minor: 24px;

  /* ======================================================
   * SEMANTIC LAYER — default "Blueprint After Dark"
   * ====================================================== */

  /* Backgrounds / surfaces */
  --bg-page:     var(--navy-900);
  --bg-surface:  var(--navy-800);
  --bg-subtle:   #1f2c72;
  --bg-raised:   var(--navy-700);
  --bg-inverse:  var(--white);
  --bg-overlay:  rgba(15,23,64,0.72);

  /* Text */
  --text:         var(--alpha-92);
  --text-strong:  var(--white);
  --text-muted:   var(--alpha-82);
  --text-dim:     var(--alpha-70);   /* large / non-essential only */
  --text-inverse: var(--navy-900);   /* on --bg-inverse */

  /* Borders */
  --border:        var(--alpha-10);
  --border-strong: var(--yellow-alpha-28);

  /* Action (primary CTA = yellow on navy) */
  --action:                  var(--yellow-500);
  --action-hover:            var(--yellow-600);
  --action-text:             var(--navy-900);
  --action-secondary-bg:     transparent;
  --action-secondary-border: var(--yellow-alpha-28);
  --action-secondary-text:   var(--white);

  /* Link + accent */
  --link:       var(--yellow-500);
  --link-hover: var(--yellow-600);
  --accent:     var(--yellow-500);

  /* Focus */
  --focus: var(--yellow-500);

  /* Signal (always pair with icon/text, never color alone) */
  --info:    var(--blue-500);
  --success: var(--green-500);
  --warning: var(--amber-500);
  --error:   var(--red-500);

  /* ---------- Typography ---------- */
  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, Consolas, monospace;

  --type-h1:   clamp(56px, 7vw, 96px);
  --type-h2:   clamp(40px, 5vw, 72px);
  --type-h3:   clamp(28px, 3.5vw, 48px);
  --type-h4:   clamp(20px, 2.5vw, 32px);
  --type-lead: clamp(18px, 1.4vw, 22px);
  --type-body: 16px;
  --type-small: 14px;
  --type-label: 12px;
  --type-caption: 12px;

  --lh-display: 0.95;
  --lh-body: 1.75;
  --lh-tight: 1.2;

  /* ---------- Spacing scale ---------- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --section-pad: clamp(4rem, 8vw, 8rem);

  /* ---------- Control + icon sizing ---------- */
  --control-sm: 2.5rem;
  --control-md: 2.75rem;  /* ≥44px touch target */
  --control-lg: 3.25rem;
  --icon-sm: 1rem;
  --icon-md: 1.25rem;
  --icon-lg: 1.5rem;

  /* ---------- Containers ---------- */
  --container-narrow:  42rem;
  --container-default: 74rem;
  --container-wide:    90rem;   /* large-monitor cap (AC-RWD-005) */
  --container-pad: clamp(1.25rem, 4vw, 4rem);

  /* ---------- Breakpoints (reference; used in media queries) ---------- */
  --bp-sm: 30rem;   /* 480 */
  --bp-md: 48rem;   /* 768 */
  --bp-lg: 64rem;   /* 1024 */
  --bp-xl: 80rem;   /* 1280 */
  --bp-2xl: 96rem;  /* 1536 */

  /* ---------- Borders + radii ---------- */
  --border-1: 1px;
  --border-2: 2px;
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;

  /* ---------- Shadows (tints recomputed for navy) ---------- */
  --shadow-1: 0 1px 2px rgba(15,23,64,0.20);
  --shadow-2: 0 12px 32px rgba(15,23,64,0.30);
  --shadow-3: 0 24px 64px rgba(15,23,64,0.40);

  /* ---------- Motion (defined fresh) ---------- */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --ease-standard:   cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0.2, 1);

  /* ---------- Z-index ladder ---------- */
  --z-base: 0;
  --z-sticky: 20;
  --z-menu: 40;
  --z-overlay: 60;
  --z-dialog: 80;
  --z-toast: 100;

  /* ---------- Layout constants ---------- */
  --nav-h: 72px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 1ms;
    --motion-base: 1ms;
    --motion-slow: 1ms;
  }
}