/* ═══════════════════════════════════════════════════════════════
   VIPRA SOFTWARE — DESIGN TOKENS  v1.0  (2026-06-16)
   Single source of truth for all design values.
   ──────────────────────────────────────────────────────────────
   LAYERS
     1. Primitive values   — raw hex / unitless numbers
     2. Semantic aliases   — site.css naming system (current)
     3. Legacy aliases     — style.css naming system (backwards-compat)
     4. Dark theme         — [data-theme="dark"] overrides
     5. Typography tokens  — font families + type scale
     6. Layout tokens      — wrap, gutter, section rhythm
   ──────────────────────────────────────────────────────────────
   NEVER reference primitives in component CSS.
   Always use semantic or legacy aliases so a future theme swap
   only touches this file.
   ═══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   1. PRIMITIVE PALETTE
   ────────────────────────────────────────────────────────────── */
:root {
  /* Ink — harbor slate */
  --primitive-ink-900: #131F2A;   /* darkest band */
  --primitive-ink-850: #0D161F;   /* deeper band  */
  --primitive-ink-800: #1B2936;   /* raised card  */
  --primitive-ink-700: #2A3A47;
  --primitive-ink-100: #E9EEF1;   /* text on dark */
  --primitive-ink-200: #93A4AF;   /* secondary on dark */
  --primitive-ink-300: rgba(233,238,241,0.12); /* divider on dark */

  /* Paper — cool porcelain */
  --primitive-paper-100: #F2F4F5;
  --primitive-paper-200: #E9EDEF;
  --primitive-paper-300: #D9DFE2;
  --primitive-paper-400: #C3CCD2;

  /* White */
  --primitive-white:    #FFFFFF;

  /* Steel — warm mid-grey */
  --primitive-steel-500: #54646E;
  --primitive-steel-400: #7C8B95;
  --primitive-steel-300: #93A4AF;

  /* Flow — conduit teal (data in motion) */
  --primitive-flow-600: #11897D;
  --primitive-flow-500: #2FC9B6;
  --primitive-flow-soft: rgba(17,137,125,0.08);
  --primitive-flow-glow: rgba(17,137,125,0.16);
  --primitive-flow-glow-dark: rgba(47,201,182,0.25);
  --primitive-flow-soft-dark: rgba(47,201,182,0.08);

  /* Signal — Vipra red (actions only) */
  --primitive-signal-600: #E0382C;
  --primitive-signal-700: #B8281E;
  --primitive-signal-glow: rgba(224,56,44,0.18);
  --primitive-signal-soft: rgba(224,56,44,0.07);
  --primitive-signal-glow-dark: rgba(224,56,44,0.30);
  --primitive-signal-soft-dark: rgba(224,56,44,0.10);

  /* Amber — warning */
  --primitive-amber-600: #A87908;
  --primitive-amber-dark: #D9A13B;
  --primitive-amber-soft: rgba(168,121,8,0.08);
  --primitive-amber-soft-dark: rgba(217,161,59,0.10);

  /* Electric — accent blue-grey */
  --primitive-electric-500: #3D6B84;
  --primitive-electric-dark: #7FA8BE;
  --primitive-electric-soft: rgba(61,107,132,0.08);
  --primitive-electric-soft-dark: rgba(127,168,190,0.08);

  /* Surfaces / shadows */
  --primitive-surface:     rgba(19,31,42,0.03);
  --primitive-surface-2:   rgba(19,31,42,0.06);
  --primitive-nav-bg:      rgba(13,22,31,0.94);
  --primitive-shadow-card: 0 4px 24px rgba(19,31,42,0.07);
  --primitive-shadow-card-dark: 0 8px 40px rgba(0,0,0,0.50);
  --primitive-grid-line:   rgba(19,31,42,0.045);
  --primitive-grid-line-dark: rgba(233,238,241,0.03);
  --primitive-wm-shadow:   rgba(0,0,0,0.12);
  --primitive-wm-shadow-dark: rgba(0,0,0,0.45);
  --primitive-panel-dark:  rgba(233,238,241,0.03);
  --primitive-edge-dark:   rgba(233,238,241,0.12);
  --primitive-edge-2-dark: rgba(233,238,241,0.22);
  --primitive-surface-dark:   rgba(233,238,241,0.03);
  --primitive-surface-2-dark: rgba(233,238,241,0.06);
  --primitive-input-dark:  rgba(233,238,241,0.05);
}


/* ──────────────────────────────────────────────────────────────
   2. SEMANTIC ALIASES  (site.css naming — preferred going forward)
   ────────────────────────────────────────────────────────────── */
:root {
  /* Structure */
  --ink:         var(--primitive-ink-900);
  --ink-2:       var(--primitive-ink-850);
  --ink-3:       var(--primitive-ink-800);
  --paper:       var(--primitive-paper-100);
  --card:        var(--primitive-white);
  --steel:       var(--primitive-steel-500);
  --line:        var(--primitive-paper-300);

  /* On-dark text */
  --ink-text:    var(--primitive-ink-100);
  --ink-sub:     var(--primitive-ink-200);
  --ink-line:    var(--primitive-ink-300);

  /* Brand colours */
  --flow:        var(--primitive-flow-600);
  --flow-bright: var(--primitive-flow-500);
  --signal:      var(--primitive-signal-600);
  --signal-deep: var(--primitive-signal-700);
}


/* ──────────────────────────────────────────────────────────────
   3. LEGACY ALIASES  (style.css naming — backwards-compat)
      Maps old names → primitives so zero HTML changes needed.
   ────────────────────────────────────────────────────────────── */
:root {
  /* Light surfaces */
  --bg:          var(--primitive-paper-100);
  --bg2:         var(--primitive-white);
  --bg3:         var(--primitive-paper-200);
  --panel:       var(--primitive-surface);
  --edge:        var(--primitive-paper-300);
  --edge2:       var(--primitive-paper-400);

  /* Text */
  --snow:        var(--primitive-ink-900);
  --snow2:       var(--primitive-ink-700);
  --fog:         var(--primitive-steel-400);
  --fog2:        var(--primitive-steel-500);
  --heading:     var(--primitive-ink-900);
  --body-text:   var(--primitive-steel-500);

  /* Surfaces */
  --surface:     var(--primitive-surface);
  --surface2:    var(--primitive-surface-2);

  /* Brand — teal */
  --vg-teal:     var(--primitive-flow-600);
  --teal:        var(--primitive-flow-600);
  --teal-soft:   var(--primitive-flow-soft);
  --teal-glow:   var(--primitive-flow-glow);

  /* Brand — red */
  --red:         var(--primitive-signal-600);
  --red-glow:    var(--primitive-signal-glow);
  --red-soft:    var(--primitive-signal-soft);

  /* Amber */
  --amber:       var(--primitive-amber-600);
  --amber-soft:  var(--primitive-amber-soft);

  /* Electric */
  --electric:      var(--primitive-electric-500);
  --electric-soft: var(--primitive-electric-soft);

  /* Nav / chrome */
  --nav-bg:      var(--primitive-nav-bg);
  --logo-main:   var(--primitive-white);
  --logo-accent: var(--primitive-signal-600);
  --logo-sub:    var(--primitive-ink-200);
  --input-bg:    var(--primitive-paper-100);

  /* Shadows */
  --shadow-card: var(--primitive-shadow-card);
  --grid-line:   var(--primitive-grid-line);
  --wm-shadow:   var(--primitive-wm-shadow);

  /* Font families (longhand aliases kept for style.css compat) */
  --font-display: var(--d);
  --font-body:    var(--b);
  --font-mono:    var(--m);
}


/* ──────────────────────────────────────────────────────────────
   4. DARK THEME
   ────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  /* Semantic */
  --paper:       var(--primitive-ink-850);
  --card:        var(--primitive-ink-800);

  /* Legacy surfaces */
  --bg:          var(--primitive-ink-850);
  --bg2:         var(--primitive-ink-900);
  --bg3:         var(--primitive-ink-800);
  --panel:       var(--primitive-panel-dark);
  --edge:        var(--primitive-edge-dark);
  --edge2:       var(--primitive-edge-2-dark);

  /* Text (dark mode flips) */
  --snow:        var(--primitive-ink-100);
  --snow2:       var(--primitive-ink-200);
  --fog:         var(--primitive-steel-400);
  --fog2:        var(--primitive-ink-200);
  --heading:     var(--primitive-ink-100);
  --body-text:   var(--primitive-ink-200);

  /* Surfaces */
  --surface:     var(--primitive-surface-dark);
  --surface2:    var(--primitive-surface-2-dark);

  /* Brand — teal (brighter on dark) */
  --vg-teal:     var(--primitive-flow-500);
  --teal:        var(--primitive-flow-500);
  --teal-soft:   var(--primitive-flow-soft-dark);
  --teal-glow:   var(--primitive-flow-glow-dark);
  --flow:        var(--primitive-flow-600);
  --flow-bright: var(--primitive-flow-500);

  /* Brand — red */
  --red:         var(--primitive-signal-600);
  --red-glow:    var(--primitive-signal-glow-dark);
  --red-soft:    var(--primitive-signal-soft-dark);

  /* Amber */
  --amber:       var(--primitive-amber-dark);
  --amber-soft:  var(--primitive-amber-soft-dark);

  /* Electric */
  --electric:      var(--primitive-electric-dark);
  --electric-soft: var(--primitive-electric-soft-dark);

  /* Nav */
  --nav-bg:      rgba(13,22,31,0.94);
  --logo-main:   var(--primitive-white);
  --logo-accent: var(--primitive-signal-600);
  --logo-sub:    var(--primitive-ink-200);
  --input-bg:    var(--primitive-input-dark);

  /* Shadows */
  --shadow-card: var(--primitive-shadow-card-dark);
  --grid-line:   var(--primitive-grid-line-dark);
  --wm-shadow:   var(--primitive-wm-shadow-dark);
}


/* ──────────────────────────────────────────────────────────────
   5. TYPOGRAPHY TOKENS
   ────────────────────────────────────────────────────────────── */
:root {
  /* Font families — shorthand (site.css system) */
  --d: 'Archivo', 'Helvetica Neue', sans-serif;
  --b: 'IBM Plex Sans', system-ui, sans-serif;
  --m: 'IBM Plex Mono', ui-monospace, monospace;

  /* Type scale */
  --t-hero:  clamp(2.1rem, 1rem + 4.6vw, 4.35rem);
  --t-h2:    clamp(1.65rem, 1.1rem + 2.2vw, 2.7rem);
  --t-h3:    clamp(1.05rem, .95rem + .5vw, 1.3rem);
  --t-body:  1rem;
  --t-small: .875rem;
  --t-mono:  .6875rem;
}


/* ──────────────────────────────────────────────────────────────
   6. LAYOUT TOKENS
   ────────────────────────────────────────────────────────────── */
:root {
  --wrap: 1180px;
  --gut:  clamp(20px, 4.5vw, 48px);
  --sp:   clamp(72px, 6vw + 40px, 128px); /* section rhythm */
}