/* ============================================================================
   GTA BRAND DESIGN SYSTEM — DESIGN TOKENS
   ----------------------------------------------------------------------------
   The SINGLE SOURCE OF TRUTH for color, type, spacing, radii, shadows, and the
   spectrum gradient. Every other file (system.css, components.css, inlined SVG)
   references these custom properties via var(--gta-*). No file outside this one
   should hard-code a color, font, size, or spacing value.

   Structure:
     1. @font-face .............. self-hosted woff2 (offline + print-reliable)
     2. :root TIER 1 ............ PRIMITIVES  (named by what they ARE)
     3. :root TIER 2 ............ SEMANTICS   (named by ROLE; reference primitives)
     4. Scales .................. type / space / radius / shadow / layout
     5. Light theme ............. [data-theme="light"] remap (semantics only)
     6. @media print ............ auto light remap + page setup

   Theme model: components consume SEMANTIC tokens only, so flipping to the light
   theme (for text-heavy print) is a one-layer remap — no component edits.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. FONTS — self-hosted woff2 in assets/fonts/.
   A Google Fonts <link> equivalent is documented in README as a fallback, but
   self-hosting keeps the system rendering offline and printing deterministically.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "Saira Condensed";
  src: url("../assets/fonts/saira-condensed-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Saira Condensed";
  src: url("../assets/fonts/saira-condensed-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Saira Condensed";
  src: url("../assets/fonts/saira-condensed-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../assets/fonts/ibm-plex-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../assets/fonts/ibm-plex-sans-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../assets/fonts/ibm-plex-sans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* =========================================================================
     2. TIER 1 — PRIMITIVES  (raw values; never used directly by components)
     ========================================================================= */

  /* -- Charcoal ground ramp (warm-neutral near-blacks).
        --charcoal-800 #201E21 is the real tone lifted from the GTA backdrop. -- */
  --gta-charcoal-950: #0E0E11;
  --gta-charcoal-900: #16161A;   /* primary dark ground               */
  --gta-charcoal-850: #1B1B20;
  --gta-charcoal-800: #201E21;   /* elevated surface (cards, panels)  */
  --gta-charcoal-700: #2C2C32;   /* hairlines, dividers               */
  --gta-charcoal-600: #3A3A42;

  /* -- Neutrals / ink -- */
  --gta-white:     #F4F5F7;      /* primary ink on dark (not pure white) */
  --gta-gray-300:  #C7CAD1;
  --gta-gray-400:  #A8ADB7;      /* muted ink on dark                    */
  --gta-gray-500:  #6B7280;      /* subtle ink / "planned" status        */
  --gta-paper:     #FFFFFF;      /* light-theme ground                   */
  --gta-paper-2:   #F2F3F5;      /* light-theme elevated surface         */
  --gta-paper-line:#D7DAE0;      /* light-theme hairline                 */
  --gta-ink-900:   #16161A;      /* light-theme primary ink              */
  --gta-ink-600:   #4A4F59;      /* light-theme muted ink                */

  /* -- Brand blue = the REAL Fluxx azure (sampled from PHI_logo_1024.png ~#1962A3,
        tuned for white-text contrast). The flat traced disc + GTA wordmark use this. -- */
  --gta-blue-600:  #0E4E84;      /* azure dark — light-theme links, ring on charcoal */
  --gta-blue-500:  #1666A6;      /* brand azure (the one brand blue)     */
  --gta-blue-400:  #1E78BE;      /* azure light — matte-gradient top / accents */

  /* -- Signal accents (from the reticle / contour highlights) -- */
  --gta-cyan-400:  #2CE5E5;      /* glowing reticle / signal on dark     */
  --gta-cyan-600:  #119AA6;      /* AA-capable cyan for text on light    */
  --gta-lime-400:  #B6FF3B;      /* alt reticle / contour highlight      */

  /* -- Spectrum (visible-light analog; encodes "hyperspectral").
        Ordered left->right to match the existing banner underline.       -- */
  --gta-spectrum-0: #FF3B30;     /* red    */
  --gta-spectrum-1: #FF7A1A;     /* orange */
  --gta-spectrum-2: #FFD60A;     /* yellow */
  --gta-spectrum-3: #34C759;     /* green  */
  --gta-spectrum-4: #22D3EE;     /* cyan   */
  --gta-spectrum-5: #2C6FE5;     /* blue   */
  --gta-spectrum-6: #7A5CFF;     /* violet */

  /* -- Status primitives (honesty convention) -- */
  --gta-green-500: #34C759;      /* built     */
  --gta-amber-500: #FFB020;      /* building  */
  --gta-red-500:   #FF453A;      /* error     */

  /* =========================================================================
     3. TIER 2 — SEMANTICS  (role-based; THIS is what components reference)
     ========================================================================= */

  /* -- Surfaces & ink -- */
  --gta-color-ground:      var(--gta-charcoal-900);
  --gta-color-ground-deep: var(--gta-charcoal-950);
  --gta-color-surface:     var(--gta-charcoal-800);
  --gta-color-surface-2:   var(--gta-charcoal-850);
  --gta-color-line:        var(--gta-charcoal-700);
  --gta-color-ink:         var(--gta-white);
  --gta-color-ink-muted:   var(--gta-gray-400);
  --gta-color-ink-subtle:  var(--gta-gray-500);
  --gta-color-ink-invert:  var(--gta-charcoal-900); /* flips on light theme */

  /* -- Brand & signals -- */
  --gta-color-brand-blue:  var(--gta-blue-500);
  --gta-color-signal-cyan: var(--gta-cyan-400);

  /* Per-product ACCENT (tint layer over the shared brand). GTA-MASTER DEFAULT = the
     iconic signal CYAN (reticle + eyebrows stay cyan on master pages); products remap
     it via [data-product] at the END of this file (Fluxx azure / OreVision copper / SLiMS teal).
       --gta-accent      luminous signal (legible on dark): reticle, glow, single-accent
                         contours, ghost-button border, eyebrow/links on dark.
       --gta-accent-ink  deep shade (white-text fills like the primary button; accent text on light).
       --gta-accent-text theme-aware accent text (= --gta-accent on dark, --gta-accent-ink on light). */
  --gta-accent:      var(--gta-cyan-400);
  --gta-accent-ink:  var(--gta-blue-500);
  --gta-accent-text: var(--gta-accent);
  --gta-glow-accent: 0 0 22px color-mix(in srgb, var(--gta-accent) 55%, transparent);

  --gta-color-reticle:     var(--gta-accent);
  --gta-color-accent-lime: var(--gta-lime-400);
  --gta-color-link:        var(--gta-accent-text);
  --gta-color-link-hover:  var(--gta-white);
  --gta-color-focus-ring:  var(--gta-cyan-400);

  /* -- Contour motif colors (used at low alpha in the contour SVGs) -- */
  --gta-color-contour-1: var(--gta-cyan-400);
  --gta-color-contour-2: var(--gta-lime-400);
  --gta-color-contour-3: var(--gta-spectrum-1);  /* orange */
  --gta-color-contour-4: var(--gta-blue-400);
  --gta-color-contour-5: var(--gta-spectrum-0);  /* red    */
  --gta-color-contour-faint: rgba(244, 245, 247, 0.06); /* neutral ghost lines */

  /* -- Spectrum gradient (the reusable rainbow) -- */
  --gta-spectrum: linear-gradient(
    90deg,
    var(--gta-spectrum-0) 0%,
    var(--gta-spectrum-1) 17%,
    var(--gta-spectrum-2) 33%,
    var(--gta-spectrum-3) 50%,
    var(--gta-spectrum-4) 67%,
    var(--gta-spectrum-5) 83%,
    var(--gta-spectrum-6) 100%
  );

  /* -- Status (built / building / planned). Color is ONE channel only;
        components must also carry a glyph + text label. -- */
  --gta-status-built:    var(--gta-green-500);
  --gta-status-building: var(--gta-amber-500);
  --gta-status-planned:  var(--gta-gray-500);
  --gta-status-success:  var(--gta-green-500);
  --gta-status-warning:  var(--gta-amber-500);
  --gta-status-error:    var(--gta-red-500);
  --gta-status-info:     var(--gta-cyan-400);

  /* =========================================================================
     4. SCALES
     ========================================================================= */

  /* -- Type families (documented fallback stacks) -- */
  --gta-font-headline: "Saira Condensed", "Oswald", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  --gta-font-body:     "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gta-font-mono:     "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;

  /* -- Type scale (px) -- */
  --gta-text-xs:      12px;
  --gta-text-sm:      14px;
  --gta-text-base:    16px;
  --gta-text-lg:      20px;
  --gta-text-xl:      28px;
  --gta-text-2xl:     40px;
  --gta-text-3xl:     56px;
  --gta-text-display: 80px;

  /* -- Line-heights -- */
  --gta-lh-tight:   1.04;   /* display / big headlines */
  --gta-lh-snug:    1.15;   /* sub-headlines           */
  --gta-lh-base:    1.5;    /* body                    */
  --gta-lh-relaxed: 1.65;   /* long-form reading       */

  /* -- Tracking (letter-spacing) -- */
  --gta-tracking-tight:  -0.01em;
  --gta-tracking-normal: 0;
  --gta-tracking-wide:   0.04em;
  --gta-tracking-eyebrow: 0.16em;  /* all-caps eyebrows / mono labels */

  /* -- Weights -- */
  --gta-weight-body:     400;
  --gta-weight-medium:   500;
  --gta-weight-semibold: 600;
  --gta-weight-head:     700;
  --gta-weight-head-max: 800;

  /* -- Spacing scale (4px base) -- */
  --gta-space-0:  0;
  --gta-space-1:  4px;
  --gta-space-2:  8px;
  --gta-space-3:  12px;
  --gta-space-4:  16px;
  --gta-space-5:  20px;
  --gta-space-6:  24px;
  --gta-space-8:  32px;
  --gta-space-10: 40px;
  --gta-space-12: 48px;
  --gta-space-16: 64px;
  --gta-space-20: 80px;
  --gta-space-24: 96px;

  /* -- Radii -- */
  --gta-radius-sm:   4px;
  --gta-radius-md:   8px;
  --gta-radius-lg:   16px;
  --gta-radius-pill: 999px;

  /* -- Borders -- */
  --gta-border-width: 1px;
  --gta-border:       1px solid var(--gta-color-line);

  /* -- Shadows / glow -- */
  --gta-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.45);
  --gta-shadow-pop:  0 12px 40px rgba(0, 0, 0, 0.55);
  --gta-glow-cyan:   0 0 22px rgba(44, 229, 229, 0.45);
  --gta-glow-lime:   0 0 22px rgba(182, 255, 59, 0.40);

  /* -- Layout -- */
  --gta-maxw-page:  1200px;
  --gta-maxw-text:  68ch;
  --gta-gutter:     var(--gta-space-6);
}

/* ===========================================================================
   5. LIGHT THEME — semantics remap only (primitives & scales unchanged).
   Apply with <html data-theme="light"> or class .theme-light on any element.
   Used to demo the print look on screen; print applies it automatically (§6).
   Spectrum + status colors are intentionally KEPT — they carry meaning.
   =========================================================================== */
[data-theme="light"],
.theme-light {
  --gta-color-ground:      var(--gta-paper);
  --gta-color-ground-deep: var(--gta-paper-2);
  --gta-color-surface:     var(--gta-paper);
  --gta-color-surface-2:   var(--gta-paper-2);
  --gta-color-line:        var(--gta-paper-line);
  --gta-color-ink:         var(--gta-ink-900);
  --gta-color-ink-muted:   var(--gta-ink-600);
  --gta-color-ink-subtle:  var(--gta-gray-500);
  --gta-color-ink-invert:  var(--gta-white);

  --gta-accent-text:       var(--gta-accent-ink);  /* deep accent reads on white */
  --gta-color-reticle:     var(--gta-accent-ink);
  --gta-color-signal-cyan: var(--gta-cyan-600);
  --gta-color-link-hover:  var(--gta-ink-900);
  --gta-glow-accent:       0 0 0 1px color-mix(in srgb, var(--gta-accent-ink) 40%, transparent);

  /* Contours become faint gray topography on paper (matches the inverted asset). */
  --gta-color-contour-1: #C2C6CE;
  --gta-color-contour-2: #C8CCD3;
  --gta-color-contour-3: #CDC4BD;
  --gta-color-contour-4: #BFC6D2;
  --gta-color-contour-5: #D2C3C1;
  --gta-color-contour-faint: rgba(22, 22, 26, 0.05);

  --gta-shadow-card: 0 2px 10px rgba(16, 16, 26, 0.12);
  --gta-shadow-pop:  0 8px 28px rgba(16, 16, 26, 0.16);
  --gta-glow-cyan:   0 0 0 1px rgba(17, 154, 166, 0.30);
  --gta-glow-lime:   0 0 0 1px rgba(120, 150, 30, 0.30);
}

/* ===========================================================================
   6. PRINT — flyers/grants/cards print to PDF. Default to the LIGHT theme for
   ink economy + paper legibility; pieces that must stay dark opt back in with
   .print-keep-dark (see system.css). Page geometry lives here.
   =========================================================================== */
@media print {
  :root {
    --gta-color-ground:      var(--gta-paper);
    --gta-color-ground-deep: var(--gta-paper-2);
    --gta-color-surface:     var(--gta-paper);
    --gta-color-surface-2:   var(--gta-paper-2);
    --gta-color-line:        var(--gta-paper-line);
    --gta-color-ink:         var(--gta-ink-900);
    --gta-color-ink-muted:   var(--gta-ink-600);
    --gta-color-ink-subtle:  var(--gta-gray-500);
    --gta-color-ink-invert:  var(--gta-white);
    --gta-accent-text:       var(--gta-accent-ink);
    --gta-color-reticle:     var(--gta-accent-ink);
    --gta-color-signal-cyan: var(--gta-cyan-600);
    --gta-glow-accent:       0 0 0 1px color-mix(in srgb, var(--gta-accent-ink) 40%, transparent);
    --gta-color-contour-1: #C2C6CE;
    --gta-color-contour-2: #C8CCD3;
    --gta-color-contour-3: #CDC4BD;
    --gta-color-contour-4: #BFC6D2;
    --gta-color-contour-5: #D2C3C1;
    --gta-color-contour-faint: rgba(22, 22, 26, 0.05);
    --gta-shadow-card: none;
    --gta-shadow-pop:  none;
  }
  /* Letter default; A4 documented as the alternative in BRAND_GUIDELINES. */
  @page { size: Letter; margin: 18mm 16mm; }
}

/* ===========================================================================
   7. PER-PRODUCT ACCENT PRESETS — set data-product on <html> (whole deliverable)
   or on any section/element (its subtree). Remaps the accent tint only; the core
   brand (ground, ink, GTA plate, type, the spectrum rule) stays shared.
     gta       cyan    — the GTA-master default (the iconic hyperspectral signal)
     fluxx     azure   — the flagship product blue
     orevision copper  — warm ore/metal tone (its flagship proof is copper-porphyry)
     slims     teal    — knowledge / clarity tone (the reasoning engine)
   Each: --gta-accent = luminous signal (dark), --gta-accent-ink = deep (white-text
   fills + accent text on light). All pass WCAG AA in their roles.
   =========================================================================== */
[data-product="gta"]       { --gta-accent: var(--gta-cyan-400); --gta-accent-ink: var(--gta-blue-500); }
[data-product="fluxx"]     { --gta-accent: #2C8BD6; --gta-accent-ink: #1666A6; }
[data-product="orevision"] { --gta-accent: #D2823C; --gta-accent-ink: #9A571F; }
[data-product="slims"]     { --gta-accent: #1FB39A; --gta-accent-ink: #0E6E5C; }