/*
  ============================================================
  CONFIDENTIAL AND PROPRIETARY
  ============================================================
  Author & Creator:  Vanessa Tezanos
  AI-Assisted By:    Claude (Anthropic) — AI-generated code
                     based on information and prompts provided
                     by Vanessa Tezanos as the original author.
  Version:           v1.0
  Created:           2026-06-10T01:28:20Z
  Updated:           2026-06-10T01:28:20Z
  Purpose:           SWX design-token layer — THE SINGLE SOURCE
                     OF TRUTH. The full :root token system (brand
                     quilt, signal/ink scales, semantic aliases,
                     type, space, radius, elevation, motion, grid)
                     plus the base type primitives, lifted verbatim
                     from SWX Global Operating Hub v1.1 / Brand
                     Style Guide v1.1. Every SWX page links this
                     AFTER swx-fonts.css and BEFORE swx-global.css.
                     A brand/token change happens HERE, once, and
                     all pages inherit it. Never hardcode hex / px /
                     shadow in page CSS — reference a token.
  ============================================================
  This document and its contents are confidential and
  proprietary. Unauthorized reproduction, distribution, or
  disclosure is strictly prohibited.
  ============================================================
*/

/* ----- TOKENS · :root (lifted from Style Guide v1.1) ----- */
:root {
  /* ============================================================================
     COLOR · Brand quilt
     Four pigments lifted directly from the SWX mark. They are equal partners
     in the identity and should be used together when possible (data-viz,
     sector tags, mark animations). RED is the primary signal — the one used
     alone for action, emphasis, and wayfinding.
     ============================================================================ */
  --brand-red:    #E03E3E;  /* coral red — PRIMARY SIGNAL */
  --brand-navy:   #163E5C;  /* deep navy */
  --brand-teal:   #8BCFD3;  /* light teal */
  --brand-yellow: #F2B23A;  /* warm amber */

  /* ----- COLOR · Signal scale (built on --brand-red) -------------------- */
  /* The signal scale aliases red. It does the work of action surfaces,
     focus rings, highlights, and brand moments. */
  --signal-50:  #FCEAEA;
  --signal-100: #F8CECE;
  --signal-200: #F1A7A7;
  --signal-300: #EA7878;
  --signal-400: #E55555;
  --signal-500: #E03E3E;  /* canonical signal = brand red */
  --signal-600: #C42E2E;
  --signal-700: #9C2424;
  --signal-800: #741B1B;
  --signal-900: #4D1212;

  /* ----- COLOR · Neutrals (Ink ⟶ Bone) ----------------------------------- */
  /* Warm-cast greyscale. Bias toward paper, not screen. */
  --ink-0:   #0A0A0A;  /* near-black, headings, ink */
  --ink-1:   #161614;
  --ink-2:   #2A2A28;
  --ink-3:   #4A4A47;
  --ink-4:   #6B6B66;
  --ink-5:   #908F88;
  --ink-6:   #B9B7AF;
  --ink-7:   #D9D6CC;
  --ink-8:   #E8E4D9;
  --ink-9:   #F4F1EC;  /* bone / paper */
  --ink-10:  #FAF8F3;  /* high-white */

  /* ----- COLOR · Semantic ------------------------------------------------- */
  /* Semantic uses muted versions that won't clash with the brand quilt. */
  --ok:        #2E7D52;
  --ok-soft:   #E4F0EA;
  --warn:      var(--brand-yellow);
  --warn-soft: #FBEACB;
  --warn-text: #7a5800;   /* dark amber: legible warn TEXT on paper (--warn yellow is too light) */
  --crit:      var(--brand-red);
  --crit-soft: var(--signal-50);
  --info:      var(--brand-navy);
  --info-soft: #DCE7EF;

  /* ----- COLOR · Surface (semantic) -------------------------------------- */
  --bg:           var(--ink-9);   /* page */
  --bg-elevated:  var(--ink-10);  /* cards on bg */
  --bg-sunken:    var(--ink-8);   /* wells / inputs */
  --bg-inverse:   var(--ink-0);   /* dark surface */
  --bg-accent:    var(--signal-500);

  --fg:           var(--ink-0);   /* primary text */
  --fg-muted:     var(--ink-3);   /* secondary text */
  --fg-subtle:    var(--ink-4);   /* tertiary / meta */
  --fg-faint:     var(--ink-5);   /* placeholder */
  --fg-inverse:   var(--ink-10);
  --fg-accent:    var(--signal-500);
  --fg-on-accent: var(--ink-10);

  --line:         var(--ink-7);   /* hairline divider */
  --line-strong:  var(--ink-6);
  --line-inverse: rgba(255,255,255,0.12);

  /* ----- TYPE · Families ------------------------------------------------- */
  /* --font-display + --font-sans both Gellix — full family self-hosted
     (Thin 100 → Black 900). Mono workhorse is Geist Mono (CDN). */
  --font-display: "Gellix", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-sans:    "Gellix", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-mono:    "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ----- TYPE · Scale (modular, 1.25) ----------------------------------- */
  --fs-10: 10px;   /* labels / spec stamps */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;   /* small body */
  --fs-15: 15px;
  --fs-16: 16px;   /* body */
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;   /* h5 */
  --fs-28: 28px;
  --fs-32: 32px;   /* h4 */
  --fs-40: 40px;   /* h3 */
  --fs-56: 56px;   /* h2 */
  --fs-72: 72px;   /* h1 */
  --fs-96: 96px;   /* display */
  --fs-128: 128px; /* hero display */

  /* ----- TYPE · Weights ------------------------------------------------- */
  --fw-thin:     200;
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* ----- TYPE · Tracking ------------------------------------------------ */
  --tr-tightest: -0.04em;  /* display */
  --tr-tight:    -0.02em;  /* headings */
  --tr-normal:    0em;     /* body */
  --tr-wide:      0.04em;  /* eyebrow */
  --tr-widest:    0.18em;  /* spec stamp */

  /* ----- TYPE · Leading ------------------------------------------------- */
  --lh-tight:   1.02;
  --lh-snug:    1.15;
  --lh-normal:  1.4;
  --lh-relaxed: 1.55;
  --lh-loose:   1.7;

  /* ----- SPACING (4px base) -------------------------------------------- */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32:  128px;
  --sp-40:  160px;
  --sp-48:  192px;
  --sp-64:  256px;

  /* ----- RADII (low — architectural) ----------------------------------- */
  --r-0:    0px;
  --r-1:    2px;
  --r-2:    4px;
  --r-3:    6px;
  --r-4:    10px;
  --r-pill: 999px;

  /* ----- ELEVATION ----------------------------------------------------- */
  /* Restrained — shadows are a wash, not a drop. */
  --e-0: none;
  --e-1: 0 1px 0 rgba(10,10,10,0.04), 0 1px 2px rgba(10,10,10,0.04);
  --e-2: 0 1px 0 rgba(10,10,10,0.04), 0 2px 6px rgba(10,10,10,0.06);
  --e-3: 0 2px 0 rgba(10,10,10,0.04), 0 8px 24px rgba(10,10,10,0.08);
  --e-4: 0 4px 0 rgba(10,10,10,0.04), 0 24px 56px rgba(10,10,10,0.12);
  --e-inset: inset 0 0 0 1px var(--line);

  /* ----- GRID ---------------------------------------------------------- */
  --grid-cols: 12;
  --grid-gutter: 24px;
  --grid-margin: 64px;
  --grid-max: 1440px;

  /* ----- MOTION -------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.30, 1);
  --ease-in:    cubic-bezier(0.55, 0, 1, 0.45);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --d-1: 120ms;   /* hover / press */
  --d-2: 200ms;   /* small UI */
  --d-3: 320ms;   /* panels */
  --d-4: 560ms;   /* page-level */
}

/* ----- BASE TYPE PRIMITIVES (lifted from Style Guide v1.1) ----- */
html { font-family: var(--font-sans); color: var(--fg); background: var(--bg);
       -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-size: var(--fs-16); line-height: var(--lh-relaxed); }

/* Display — used for hero numbers, pulled quotes, opening statements.
   Always set in Gellix SemiBold. */
.t-display, .t-d1 {
  font-family: var(--font-display);
  font-size: clamp(64px, 9vw, var(--fs-128));
  font-weight: 600;
  letter-spacing: var(--tr-tightest);
  line-height: var(--lh-tight);
}
.t-d2 {
  font-family: var(--font-display);
  font-size: clamp(48px, 6.5vw, var(--fs-96));
  font-weight: 600;
  letter-spacing: var(--tr-tightest);
  line-height: var(--lh-tight);
}

/* Headings — Gellix SemiBold for the brand voice. */
h1, .t-h1 { font-family: var(--font-display); font-size: var(--fs-72); font-weight: 600;
            letter-spacing: var(--tr-tight); line-height: var(--lh-tight); margin: 0; }
h2, .t-h2 { font-family: var(--font-display); font-size: var(--fs-56); font-weight: 600;
            letter-spacing: var(--tr-tight); line-height: var(--lh-snug); margin: 0; }
h3, .t-h3 { font-family: var(--font-display); font-size: var(--fs-40); font-weight: 600;
            letter-spacing: var(--tr-tight); line-height: var(--lh-snug); margin: 0; }
h4, .t-h4 { font-family: var(--font-display); font-size: var(--fs-32); font-weight: 600;
            letter-spacing: var(--tr-tight); line-height: var(--lh-snug); margin: 0; }
h5, .t-h5 { font-family: var(--font-display); font-size: var(--fs-24); font-weight: 600;
            letter-spacing: var(--tr-tight); line-height: var(--lh-snug); margin: 0; }
h6, .t-h6 { font-family: var(--font-display); font-size: var(--fs-18); font-weight: 600;
            letter-spacing: var(--tr-normal); line-height: var(--lh-normal); margin: 0; }

/* Body */
p, .t-body  { font-size: var(--fs-16); font-weight: var(--fw-regular);
              line-height: var(--lh-relaxed); margin: 0; color: var(--fg); }
.t-body-lg  { font-size: var(--fs-18); line-height: var(--lh-relaxed); }
.t-body-sm  { font-size: var(--fs-14); line-height: var(--lh-relaxed); }
.t-caption  { font-size: var(--fs-12); line-height: var(--lh-normal); color: var(--fg-muted); }

/* Eyebrow / Spec stamp — the workhorse for sectioning, captioning, metadata. */
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.t-spec {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-normal);
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
}