/* Tracer — Brand Design Tokens v3
 * Canonical palette, typography, spacing, and shape.
 * Source of truth for all Tracer deliverables.
 * See positioning/design-guidelines.md for rationale.
 *
 * CHANGES v2 → v3 (2026-04-15, aligned with client's preferred palette):
 * - Background: Carbon #0A0E14 → Navy #0C213C (dark blue tint)
 * - Surface: Graphite #151A21 → Slate #142034
 * - Primary accent: Signal Orange #FF5A1F → Tactical Cyan #55B8CC
 * - Secondary accent: Phosphor Green #8FBF4F → Field Amber #F0A818
 * - Alert Red: #D43535 → #E04848 (warmer)
 * - Divider: #1F2937 → #1E3450 (blue-tinted)
 * - Print accent: #D94817 → #C48A10
 * - Typography unchanged (e-Ukraine + JetBrains Mono)
 *
 * CHANGES v1 → v2 (2026-04-08, after 3-agent design review):
 * - Replaced Amber #D4A24C with Signal Orange #FF5A1F as primary accent
 * - Added Phosphor Green #8FBF4F as secondary (operator-console status color)
 * - Replaced Barlow Condensed with e-Ukraine Head (Ukrainian government typeface)
 * - Replaced Inter with e-Ukraine body face as primary
 * - Kept JetBrains Mono for specs
 */

:root {
  /* ==========================================================================
     Color — Primary palette (v3)
     ========================================================================== */
  --tracer-navy:        #0C213C;   /* Primary dark background — dark blue, not pure black */
  --tracer-slate:       #142034;   /* Card/section fills */
  --tracer-bone:        #E8ECF1;   /* Primary text on dark */
  --tracer-smoke:       #8B95A5;   /* Secondary text, captions */

  /* Primary accent — Tactical Cyan (replaces v2 Signal Orange #FF5A1F)
     Rationale: client-preferred, reads as instrument/HUD display,
     pairs with dark navy background for a tactical-systems feel. */
  --tracer-cyan:        #55B8CC;

  /* Secondary accent — Field Amber (replaces v2 Phosphor Green #8FBF4F)
     Rationale: client-preferred, warm contrast to cyan, used for
     CTA elements, logo accent, key highlight moments. */
  --tracer-amber:       #F0A818;

  /* Color — Tertiary */
  --tracer-olive:       #4A7A6A;   /* Reserved — map zones, "deployed" status */
  --tracer-alert:       #E04848;   /* Critical, kinetic, alert */
  --tracer-divider:     #1E3450;   /* Borders, rules — blue-tinted */
  --tracer-white:       #FFFFFF;

  /* Light-mode / print palette */
  --tracer-print-bg:       #FFFFFF;
  --tracer-print-text:     #0A0E14;
  --tracer-print-muted:    #555E6B;
  --tracer-print-accent:   #C48A10;   /* Field Amber darkened for white bg contrast */
  --tracer-print-divider:  #CFD4DC;

  /* ==========================================================================
     Semantic color aliases
     ========================================================================== */
  --color-bg:           var(--tracer-navy);
  --color-surface:      var(--tracer-slate);
  --color-text:         var(--tracer-bone);
  --color-text-muted:   var(--tracer-smoke);
  --color-accent:       var(--tracer-cyan);     /* Primary accent */
  --color-accent-2:     var(--tracer-amber);    /* Secondary accent — CTA, highlights */
  --color-accent-3:     var(--tracer-olive);    /* Tertiary — map zones */
  --color-alert:        var(--tracer-alert);
  --color-border:       var(--tracer-divider);

  /* ==========================================================================
     Typography — font families (v2: e-Ukraine primary, JetBrains Mono for specs)
     Fonts must be self-hosted in shared/fonts/. Download e-Ukraine from
     https://brandbook.gov.ua/ (official Ukrainian government brand site, free).
     Fallback cascade included for development before fonts are dropped in.
     ========================================================================== */
  --font-display:  "e-Ukraine Head", "Space Grotesk", "IBM Plex Sans Condensed", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:     "e-Ukraine", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:     "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Aliases */
  --font-sans:    var(--font-body);
  --font-heading: var(--font-display);

  /* ==========================================================================
     Typography — type scale
     ========================================================================== */
  --fs-hero:      2.75rem;   /* 44px — one-pager hero */
  --fs-h1:        2.75rem;
  --fs-h2:        2rem;
  --fs-h3:        1.35rem;
  --fs-body:      1rem;
  --fs-small:     0.85rem;
  --fs-eyebrow:   0.85rem;
  --fs-spec:      0.95rem;

  --lh-tight:   1.1;
  --lh-heading: 1.15;
  --lh-body:    1.5;
  --lh-small:   1.4;

  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.02em;
  --ls-eyebrow: 0.18em;

  /* ==========================================================================
     Spacing scale (4px base)
     ========================================================================== */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  1rem;
  --s-4:  1.5rem;
  --s-5:  2rem;
  --s-6:  3rem;
  --s-7:  4rem;
  --s-8:  6rem;
  --s-9:  8rem;

  /* ==========================================================================
     Shape
     ========================================================================== */
  --radius-none:  0;
  --radius-sm:    2px;
  --radius-md:    4px;
  --radius-lg:    8px;

  --border-hairline: 1px solid var(--color-border);
  --border-strong:   2px solid var(--color-border);

  /* ==========================================================================
     Layout
     ========================================================================== */
  --container-max:  1200px;
  --content-column: 760px;
  --slide-width:    1920px;
  --slide-height:   1080px;
}

/* ==========================================================================
   Print / light mode
   ========================================================================== */
@media print {
  :root {
    --color-bg:         var(--tracer-print-bg);
    --color-surface:    var(--tracer-print-bg);
    --color-text:       var(--tracer-print-text);
    --color-text-muted: var(--tracer-print-muted);
    --color-accent:     var(--tracer-print-accent);
    --color-border:     var(--tracer-print-divider);
  }
}