/* ============================================================================
   ca-tokens.css  --  shared design tokens (CAAdmin / CustomerAccounts)
   Loaded AFTER Bootstrap, BEFORE the app's own stylesheet, so the Layer-3
   bridge overrides Bootstrap defaults and app CSS can reference the tokens.

   THREE LAYERS
     1. primitives  -- raw values; the ONLY place a hex/px literal is written
     2. semantic    -- role names; app CSS + views reference THESE, never raw hex
     3. bridge      -- points Bootstrap's own --bs-* vars at our semantic tokens

   SHARED CONVENTION: same structure + token names across TeamHQ and CustomerAccounts.
   Per Ian's 2026-07-10 decision this is a PER-REPO seeded COPY, not a literally
   shared/hosted file -- each app keeps its own copy and seeds the VALUES to its own
   current look, so adopting it changes NOTHING visually. Values below are seeded to
   CAAdmin's current palette: CAAdmin uses unmodified Bootstrap 5.3.8 (loaded from CDN
   in _Layout.cshtml) for its theme roles, plus the few colors ca.css / Site.css
   actually customize. To rebrand, edit ONE primitive in Layer 1 and it flows everywhere.
   (Open item for Jon: rename --ca-* -> neutral --ds-* if this becomes the
   canonical cross-app file. One find-replace when we decide.)
   ============================================================================ */

:root {
  /* ---- Layer 1: primitives (raw values live ONLY here) ------------------- */
  --ca-blue-600:    #0d6efd;   /* accent/primary blue (= Bootstrap default primary; CAAdmin --bs-primary, not overridden) */
  --ca-green-600:   #198754;   /* success (= Bootstrap default success; CAAdmin text-success) */
  --ca-red-600:     #dc3545;   /* danger  (= Bootstrap default danger; CAAdmin text-danger) */
  --ca-yellow-400:  #ffc107;   /* warning yellow (= Bootstrap default warning; CAAdmin badge bg-warning) */
  --ca-orange-500:  #ffa500;   /* row-highlight orange (CAAdmin ca.css .GridTableBodyText-Highlight -- CSS named "orange") */
  --ca-purple-600:  #6f42c1;   /* episode/planned purple (= Bootstrap $purple default; not used in CAAdmin) */
  --ca-purple-brand:#712cf9;   /* CAAdmin brand accent (favicon mask-icon + theme-color + btn-bd-primary in _Layout) */
  --ca-black:       #000000;   /* pure literal black (CAAdmin ca.css .ca-group-panel border, grid body text, .elipseButton:hover) -- distinct from --ca-gray-900 #212529 which is Bootstrap body text, not true black */
  --ca-gray-900:    #212529;   /* body text (= Bootstrap default body color) */
  --ca-gray-600:    #6c757d;   /* muted/neutral (= Bootstrap default secondary; CAAdmin text-muted) */
  --ca-gray-350:    #d3d3d3;   /* grid/table header bg (CAAdmin ca.css .table-header / thead th -- CSS named "lightgray", distinct from --ca-gray-300 #dee2e6 border) */
  --ca-gray-300:    #dee2e6;   /* borders/dividers (= Bootstrap default border) */
  --ca-gray-150:    #f5f5f5;   /* grid body bg (CAAdmin ca.css .gridDefault / .GridTableBodyText -- CSS named "whitesmoke", distinct from --ca-gray-100 #f8f9fa subtle surface) */
  --ca-gray-100:    #f8f9fa;   /* subtle surface: card headers, table headers, row stripes (= Bootstrap default) */
  --ca-white:       #ffffff;
  --ca-neutral-800: #393a3e;   /* CAAdmin .elipseButton bg/border (ca.css) -- off-black UI grey, distinct from --ca-black #000 and the Bootstrap gray ramp */

  /* spacing scale -- 4px grid (= Bootstrap spacing scale; CAAdmin uses p-3/mb-3 utils + ca.css .25/.5rem) */
  --ca-space-1: .25rem;   /* 4px  */
  --ca-space-2: .5rem;    /* 8px  */
  --ca-space-3: .75rem;   /* 12px */
  --ca-space-4: 1rem;     /* 16px */
  --ca-space-5: 1.5rem;   /* 24px */
  --ca-space-6: 3rem;     /* 48px */

  --ca-radius-sm: .25rem;      /* badge / inline-code radius (~4px) */
  --ca-radius:    .375rem;     /* Bootstrap default border-radius (~6px) -- CAAdmin --bs-border-radius, not overridden */
  --ca-radius-lg: .5rem;       /* card container radius (~8px) */
  --ca-font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;  /* Bootstrap default body font; CAAdmin does not override it (ca.css grids use Arial locally) */

  /* type scale -- rem; seeded to CAAdmin's Bootstrap-default body sizing (CAAdmin does NOT
     shrink body copy the way TeamHQ does). --ca-text-xs matches the .75rem ca.css grids. */
  --ca-text-xs:   .75rem;    /* 12px -- grid/table text, version info (ca.css) */
  --ca-text-sm:   .875rem;   /* 14px -- Bootstrap default small/form-text (no distinct CAAdmin value) */
  --ca-text-base: 1rem;      /* 16px -- Bootstrap default body copy (CAAdmin does not override body font-size) */
  --ca-text-md:   1.125rem;  /* 18px */
  --ca-text-lg:   1.25rem;   /* 20px -- Bootstrap .fs-5 */
  --ca-text-xl:   1.5rem;    /* 24px -- Bootstrap .fs-4 */
  --ca-text-2xl:  2rem;      /* 32px -- Bootstrap .fs-2 */

  /* ---- Layer 2: semantic (role names -- reference THESE in app CSS) ------- */
  --ca-brand:          var(--ca-blue-600);    /* current primary. Flip to var(--ca-purple-brand) to rebrand. */
  --ca-success:        var(--ca-green-600);
  --ca-danger:         var(--ca-red-600);
  --ca-warning:        var(--ca-yellow-400);    /* #ffc107 -- conventional warning */
  --ca-accent-orange:  var(--ca-orange-500);    /* #ffa500 -- CAAdmin grid row-highlight */
  --ca-accent-purple:  var(--ca-purple-600);
  --ca-ink:            var(--ca-gray-900);
  --ca-ink-strong:     var(--ca-black);        /* literal-black text/border: grids, .ca-group-panel, .elipseButton:hover */
  --ca-muted:          var(--ca-gray-600);
  --ca-border:         var(--ca-gray-300);
  --ca-surface:        var(--ca-white);        /* page/body surface */
  --ca-surface-subtle: var(--ca-gray-100);     /* card headers, stripes */
  --ca-surface-grid:   var(--ca-gray-150);     /* grid body background (whitesmoke) */
  --ca-surface-header: var(--ca-gray-350);     /* grid/table header background */
  --ca-neutral-dark:   var(--ca-neutral-800);  /* .elipseButton dark bg/border */

  /* ---- Layer 3: bridge (feed Bootstrap -- seeded to defaults = NO-OP) ----- */
  /* Only vars whose token value EQUALS the current Bootstrap default are bridged,
     so this changes nothing today. (--ca-success/-danger/-warning also equal
     Bootstrap defaults and are safe to bridge later; --ca-accent-orange (#ffa500)
     is not a Bootstrap theme color, so it must never be bridged to --bs-warning.) */
  --bs-primary:       var(--ca-brand);
  --bs-border-radius: var(--ca-radius);

  /* ---- UER-209: operator dashboard chart palette (D4) --------------------
     Validated 5-slot categorical set (CVD + contrast checked vs white and the
     dark #2b3035 surface). Dark variants live in the [data-bs-theme=dark] block
     below, so charts recolor on theme flip with zero JS re-render. */
  --ca-chart-1: #2a78d6;
  --ca-chart-2: #1baf7a;
  --ca-chart-3: #4a3aa7;
  --ca-chart-4: #eda100;
  --ca-chart-5: #e34948;
}

/* ---- Dark mode: semantic-token overrides (Layer 2 role re-map) ----------
   FIRST real dark-mode content styling for CAAdmin. ca.css already runs
   ENTIRELY on the Layer-2 semantic tokens below (never on raw hex), so it
   flips to dark automatically with ZERO ca.css changes -- redefining the roles
   here is the whole job. Only semantic roles get a dark variant, exactly like
   Bootstrap's own --bs-* vars work: the dark values are written as literals in
   this theme scope (mirroring Bootstrap's own [data-bs-theme=dark] block)
   rather than added to Layer 1 -- --ca-white, --ca-accent-orange, and every
   Layer-1 primitive stay single-source and are deliberately left untouched.
   The hex values are chosen to HARMONIZE with Bootstrap 5.3.8's own shipped
   [data-bs-theme=dark] palette (so ca.css panels/grids sit cleanly beside the
   Bootstrap cards/tables that go dark from _Layout's wrapper attribute), not
   invented from scratch. */
[data-bs-theme="dark"] {
  --ca-surface: #2b3035;         /* ca.css panel/card backgrounds -- close to Bootstrap's dark --bs-tertiary-bg */
  --ca-surface-subtle: #343a40;  /* close to Bootstrap's dark --bs-secondary-bg */
  --ca-surface-grid: #23272b;    /* grid table body background -- slightly darker than --ca-surface for contrast against panels */
  --ca-surface-header: #343a40;  /* grid/table header background */
  --ca-ink: #dee2e6;             /* body text -- matches Bootstrap's dark --bs-body-color */
  --ca-ink-strong: #f8f9fa;      /* near-white, for ca.css rules that currently hardcode literal black text */
  --ca-muted: #adb5bd;           /* matches Bootstrap's dark secondary/muted text */
  --ca-border: #495057;          /* matches Bootstrap's dark --bs-border-color */
  --ca-neutral-dark: #55585c;    /* .elipseButton bg/border -- lightened slightly from the light-mode #393a3e so it doesn't disappear against a dark page background; verify this visually if you can */

  /* UER-209 dashboard chart palette (D4) -- dark variants of --ca-chart-1..5 */
  --ca-chart-1: #3987e5;
  --ca-chart-2: #199e70;
  --ca-chart-3: #9085e9;
  --ca-chart-4: #c98500;
  --ca-chart-5: #e66767;
}