/* ============================================================
   TRMG BRAND OS, Rev 2026.3 (screen edition)
   Package: trmg1/trmg-design. Served at cdn.trmg.cloud/design/2026.3/brand.css

   Every value in the ramps below is a Rev 2026.2 value (the trmg-pdf print
   stylesheet and the Claude Design export in Launch Control). 2026.3 adds,
   it does not reinvent: dark semantic tokens, the data visualization palette,
   the type scale, spacing and shadows, all under one :root.

   Blue is the brand. Gray is neutral. Orange is alert only.
   The gradient is the one signature move, blue family only.
   Numbers first. Operator voice.

   How to use it: link this file, then write every color as a semantic
   variable (--surface-card, --text-secondary, --accent, --chart-1). A raw
   hex anywhere but this file is a house rule break.

   Light is the default. Dark follows the device, or the page sets
   data-theme="dark" or data-theme="light" on <html> to force it.
   ============================================================ */

/* ---- Fonts (bundled, relative to this file) ---- */
@font-face { font-family:"Roboto"; font-weight:400; font-display:swap; src:url("fonts/Roboto-400.woff2") format("woff2"); }
@font-face { font-family:"Roboto"; font-weight:500; font-display:swap; src:url("fonts/Roboto-500.woff2") format("woff2"); }
@font-face { font-family:"Roboto"; font-weight:700; font-display:swap; src:url("fonts/Roboto-700.woff2") format("woff2"); }
@font-face { font-family:"Roboto"; font-weight:900; font-display:swap; src:url("fonts/Roboto-900.woff2") format("woff2"); }
@font-face { font-family:"Roboto Mono"; font-weight:500; font-display:swap; src:url("fonts/RobotoMono-500.woff2") format("woff2"); }
@font-face { font-family:"Roboto Mono"; font-weight:700; font-display:swap; src:url("fonts/RobotoMono-700.woff2") format("woff2"); }

:root {
  /* ============================================================
     RAMPS (Rev 2026.2, unchanged)
     ============================================================ */
  /* Navy / indigo (brand dark) */
  --navy-950:#0E1235; --navy-900:#182055; --navy-800:#24328C; --navy-700:#2A3CA8; --navy-600:#3046C4;
  /* Cobalt (brand primary; cobalt-500 is TRMG Blue) */
  --cobalt-700:#2356B8; --cobalt-600:#2C68DA; --cobalt-500:#3483FF; --cobalt-400:#5E9CFF; --cobalt-300:#8EBCFB;
  /* Peri (light blue tints) */
  --peri-200:#C6DBFD; --peri-100:#E0ECFE; --peri-050:#F1F7FF;
  /* Orange: the ONLY warm color. Alert and action-required only. Never decoration, never a chart series.
     orange-800 is the one 2026.3 addition to the ramp: orange text on a light surface at AA (orange-700 was 3.8:1). */
  --orange-800:#9B540D; --orange-700:#B86410; --orange-600:#D97A15; --orange-500:#E8871F; --orange-400:#ECAB4C; --orange-100:#FCEEDD; --orange-050:#FFF7EC;
  /* Ink neutrals, pure gray anchored on brand ink ink-900 */
  --ink-950:#1A1A1A; --ink-900:#2C2C2C; --ink-800:#3D3D3D; --ink-700:#525252; --ink-600:#6B6B6B;
  --ink-500:#858585; --ink-400:#9E9E9E; --ink-300:#BBBBBB; --ink-200:#D8D8D8; --ink-100:#EBEBEB; --ink-050:#F6F6F6;
  --white:#FFFFFF;
  /* Semantic status (system status only, never decoration) */
  --success-500:#2CB56A; --success-100:#DDF6E7; --success-700:#1E7A46;
  --warning-500:#E8A032; --warning-100:#FBEBD2;
  --danger-500:#E2483D;  --danger-100:#FBDDDA;  --danger-700:#A5322B;

  /* ---- Gradients: sampled from the master gradient (img/brand-gradient.png).
     Stay in the blue family. Orange is never a gradient stop. ---- */
  --grad-stop-deep:#1D1E76; --grad-stop-mid:#3B83F9; --grad-stop-light:#84B2FD; --grad-stop-lightest:#CAD5F1;
  --gradient-brand:linear-gradient(135deg, var(--grad-stop-deep) 0%, var(--grad-stop-mid) 58%, var(--grad-stop-light) 100%);
  --gradient-brand-deep:linear-gradient(160deg, var(--navy-950) 0%, var(--grad-stop-deep) 42%, var(--grad-stop-mid) 100%);
  --gradient-brand-light:linear-gradient(135deg, var(--grad-stop-light) 0%, var(--peri-050) 100%);
  --gradient-spectrum:linear-gradient(90deg, #1D1E76 0%, #2742A5 22%, #326CDD 42%, #3B83F9 58%, #66A0FD 78%, #84B2FD 90%, #CAD5F1 100%);
  --gradient-slice-deep:linear-gradient(135deg, #1D1E76 0%, #2742A5 55%, #3483FF 100%);
  --gradient-slice-core:linear-gradient(135deg, #2C68DA 0%, #3483FF 50%, #66A0FD 100%);
  --gradient-slice-light:linear-gradient(135deg, #3483FF 0%, #84B2FD 45%, #CAD5F1 100%);
  /* Edge keylines, the workhorse: top of a page or letterhead, bottom of a slide, left of a sheet. */
  --gradient-edge-h:linear-gradient(90deg, #1D1E76 0%, #2742A5 22%, #326CDD 42%, #3B83F9 58%, #66A0FD 78%, #84B2FD 90%, #CAD5F1 100%);
  --gradient-edge-v:linear-gradient(180deg, #1D1E76 0%, #3483FF 55%, #CAD5F1 100%);
  --edge-thickness:5px;
  /* Site header (Mission Control): the page's one gradient moment */
  --gradient-header:linear-gradient(160deg, var(--navy-950) 0%, var(--grad-stop-deep) 46%, #2A57C6 78%, var(--grad-stop-mid) 100%);
  --gradient-glow:radial-gradient(ellipse at center, #3483FF 0%, #24328C 45%, transparent 72%);
  --surface-void:#070A1E;

  /* ============================================================
     TYPE (Roboto, three jobs: display 900, body 400/500, labels Roboto Mono)
     ============================================================ */
  --font-display:"Roboto", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body:"Roboto", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:"Roboto Mono", ui-monospace, Menlo, Consolas, monospace;
  --text-2xs:11px; --text-xs:12px; --text-sm:14px; --text-md:16px; --text-lg:19px; --text-xl:23px;
  --text-2xl:29px; --text-3xl:36px; --text-4xl:46px; --text-5xl:58px; --text-6xl:76px; --text-7xl:98px;
  --weight-regular:400; --weight-medium:500; --weight-bold:700; --weight-black:900;
  --leading-tight:1.02; --leading-snug:1.15; --leading-normal:1.4; --leading-relaxed:1.6;
  --tracking-tightest:-0.03em; --tracking-tight:-0.01em; --tracking-normal:0em; --tracking-wide:0.04em; --tracking-widest:0.14em;
  --display-hero:var(--weight-black) var(--text-7xl)/var(--leading-tight) var(--font-display);
  --display-h1:var(--weight-black) var(--text-5xl)/var(--leading-tight) var(--font-display);
  --display-h2:var(--weight-bold) var(--text-4xl)/var(--leading-tight) var(--font-display);
  --display-h3:var(--weight-bold) var(--text-3xl)/var(--leading-snug) var(--font-display);
  --display-h4:var(--weight-bold) var(--text-2xl)/var(--leading-snug) var(--font-display);
  --text-eyebrow:var(--weight-bold) var(--text-xs)/var(--leading-normal) var(--font-mono);
  --text-body-lg:var(--weight-regular) var(--text-lg)/var(--leading-relaxed) var(--font-body);
  --text-body:var(--weight-regular) var(--text-md)/var(--leading-relaxed) var(--font-body);
  --text-body-sm:var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-body);
  --text-caption:var(--weight-medium) var(--text-xs)/var(--leading-normal) var(--font-body);
  --text-stat:var(--weight-black) var(--text-6xl)/var(--leading-tight) var(--font-display);
  --text-metric-label:var(--weight-medium) var(--text-xs)/var(--leading-normal) var(--font-mono);

  /* ============================================================
     SPACE, SHAPE, ELEVATION, MOTION (flat and calibrated: no glow, no bounce)
     ============================================================ */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px;
  --radius:14px; --radius-lg:14px; --radius-md:8px; --radius-sm:4px; --radius-xl:22px; --radius-pill:999px;
  --border-width:1.5px; --border-width-hairline:1px; --border-width-strong:2px;
  --shadow-xs:0 1px 2px rgba(10,11,16,.06); --shadow-sm:0 2px 8px rgba(10,11,16,.08);
  --shadow-md:0 8px 24px rgba(10,11,16,.10); --shadow-lg:0 20px 48px rgba(10,11,16,.14);
  --shadow-brand:0 12px 32px rgba(27,30,107,.24); --shadow-focus:0 0 0 3px rgba(47,116,236,.35);
  --ease-standard:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(0,0,.2,1); --ease-in:cubic-bezier(.4,0,1,1);
  --duration-fast:120ms; --duration-base:200ms; --duration-slow:360ms;
  --container-max:1240px; --container-narrow:760px;

  /* ============================================================
     LIGHT SCHEME (default)
     Names match mission-control src/styles/tokens.css (WP1) so that file can
     be replaced by this one without a rename.
     ============================================================ */
  color-scheme:light;
  --surface-page:var(--ink-050);
  --surface-card:var(--white);
  --surface-sunken:var(--ink-100);
  --surface-brand:var(--cobalt-500);
  --surface-dark:var(--navy-800);      /* dark metric block; metrics read best on dark */
  --surface-overlay:rgba(26,26,26,.6);
  --text-primary:var(--ink-900);
  --text-secondary:var(--ink-700);
  --text-tertiary:var(--ink-600);
  --text-link:var(--cobalt-600);
  --text-on-brand:var(--white);
  --text-on-brand-muted:var(--peri-200);
  --text-inverse:var(--white);
  --border-subtle:var(--ink-100);
  --border-default:var(--ink-200);
  --border-strong:var(--ink-400);
  --border-focus:var(--cobalt-500);
  --accent:var(--cobalt-500);
  --accent-text:var(--cobalt-600);
  --accent-soft:var(--peri-050);
  --accent-line:var(--peri-200);
  --action-primary:var(--cobalt-500); --action-primary-hover:var(--cobalt-600); --action-primary-active:var(--cobalt-700);
  --action-accent:var(--navy-800); --action-accent-hover:var(--navy-900); --action-accent-active:var(--navy-950);
  /* Alert: the one warm moment. Approvals, blockers, action required, the preview banner. */
  --alert-solid:var(--orange-500); --alert-solid-hover:var(--orange-600); --alert-solid-active:var(--orange-700);
  --alert-on-solid:var(--ink-950);     /* dark ink on the orange fill: white on orange-500 is 2.7:1 */
  --alert-surface:var(--orange-100);
  --alert-text:var(--orange-800);
  --alert-border:var(--orange-400);
  /* Status: system state only, always with an icon or a label, never color alone */
  --status-good:var(--success-500); --status-good-surface:var(--success-100); --status-good-text:var(--success-700);
  --status-warning:var(--warning-500); --status-warning-surface:var(--warning-100); --status-warning-text:var(--orange-800);
  --status-danger:var(--danger-500); --status-danger-surface:var(--danger-100); --status-danger-text:var(--danger-700);
  /* Header (gradient surface) */
  --on-header:var(--white);
  --on-header-muted:var(--peri-200);
  --on-header-eyebrow:var(--cobalt-300);
  --header-pill:rgba(255,255,255,.14);
  --header-pill-hover:rgba(255,255,255,.08);
  --shadow-card:0 1px 2px rgba(14,18,53,.06);

  /* ============================================================
     DATA VISUALIZATION (light). Inside the blue family plus the semantic
     colors. Checked with the dataviz skill's validator; see docs/CHARTS.md.
     Categorical: three hues, fixed order, never cycled. A fourth series
     folds into --chart-other or becomes small multiples. Text on a chart
     wears text tokens, never the series color.
     ============================================================ */
  --chart-surface:var(--surface-card);
  --chart-1:var(--cobalt-500);          /* TRMG Blue, always first */
  --chart-2:var(--navy-600);
  --chart-3:var(--grad-stop-light);     /* 2.15:1 on white: give it a direct label or a table view */
  --chart-other:var(--ink-400);         /* "Other", the fold for a fourth series */
  --chart-alert:var(--orange-500);      /* the single action-required datapoint, nothing else */
  /* Ordinal (funnel stages, tiers): validated light end to dark end */
  --chart-ordinal-1:var(--grad-stop-light); --chart-ordinal-2:var(--cobalt-400); --chart-ordinal-3:var(--cobalt-500);
  --chart-ordinal-4:var(--cobalt-700); --chart-ordinal-5:var(--navy-800);
  /* Sequential (heatmaps, choropleths): near zero recedes toward the surface */
  --chart-seq-1:var(--peri-100); --chart-seq-2:var(--peri-200); --chart-seq-3:var(--cobalt-300); --chart-seq-4:var(--cobalt-400);
  --chart-seq-5:var(--cobalt-500); --chart-seq-6:var(--cobalt-600); --chart-seq-7:var(--cobalt-700); --chart-seq-8:var(--navy-800);
  /* Diverging (above or below a baseline): blue is up, danger red is down, neutral gray in the middle */
  --chart-diverging-pos:var(--cobalt-500); --chart-diverging-mid:var(--ink-200); --chart-diverging-neg:var(--danger-500);
  /* Status on a chart (a series that means good or bad wears these, never a categorical slot) */
  --chart-good:var(--success-500); --chart-warning:var(--warning-500); --chart-danger:var(--danger-500);
  --chart-good-text:var(--success-700); --chart-danger-text:var(--danger-700);
  /* Chrome */
  --chart-grid:var(--ink-100); --chart-axis:var(--ink-200); --chart-text:var(--text-secondary); --chart-text-muted:var(--text-tertiary);
  --chart-rail:var(--gradient-spectrum);  /* progress and timeline rails only */
}

/* ============================================================
   DARK SCHEME. Follows the device unless the page sets data-theme.
   Declared twice on purpose (media query, then the explicit toggle) so a
   viewer's choice wins both ways. Keep both blocks identical.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme:dark;
    --surface-page:var(--navy-950);
    --surface-card:#151C4A;
    --surface-sunken:#0B0F2C;
    --surface-brand:var(--cobalt-500);
    --surface-dark:var(--navy-800);
    --surface-overlay:rgba(7,10,30,.7);
    --text-primary:#EEF1FB;
    --text-secondary:#C3CBEA;
    --text-tertiary:#8D97C2;
    --text-link:var(--cobalt-300);
    --text-on-brand:var(--white);
    --text-on-brand-muted:var(--peri-200);
    --text-inverse:var(--ink-900);
    --border-subtle:rgba(255,255,255,.10);
    --border-default:rgba(255,255,255,.18);
    --border-strong:rgba(255,255,255,.32);
    --border-focus:var(--cobalt-400);
    --accent:var(--cobalt-400);
    --accent-text:var(--cobalt-300);
    --accent-soft:rgba(52,131,255,.14);
    --accent-line:rgba(142,188,251,.35);
    --action-primary:var(--cobalt-500); --action-primary-hover:var(--cobalt-400); --action-primary-active:var(--cobalt-300);
    --action-accent:var(--cobalt-300); --action-accent-hover:var(--peri-200); --action-accent-active:var(--peri-100);
    --alert-solid:var(--orange-500); --alert-solid-hover:var(--orange-400); --alert-solid-active:var(--orange-600);
    --alert-on-solid:var(--ink-950);
    --alert-surface:rgba(232,135,31,.18);
    --alert-text:var(--orange-400);
    --alert-border:rgba(236,171,76,.5);
    --status-good:var(--success-500); --status-good-surface:rgba(44,181,106,.18); --status-good-text:var(--success-500);
    --status-warning:var(--warning-500); --status-warning-surface:rgba(232,160,50,.18); --status-warning-text:var(--warning-500);
    --status-danger:var(--danger-500); --status-danger-surface:rgba(226,72,61,.18); --status-danger-text:#F08A82;
    --shadow-card:0 1px 2px rgba(0,0,0,.4);
    --chart-surface:var(--surface-card);
    --chart-1:var(--cobalt-500);
    --chart-2:var(--cobalt-700);        /* 2.39:1 on the dark card: direct label or table view */
    --chart-3:var(--cobalt-300);        /* above the dark lightness band by design; see docs/CHARTS.md */
    --chart-other:var(--ink-500);
    --chart-alert:var(--orange-500);
    --chart-ordinal-1:var(--cobalt-700); --chart-ordinal-2:var(--cobalt-500); --chart-ordinal-3:var(--cobalt-400);
    --chart-ordinal-4:var(--grad-stop-light); --chart-ordinal-5:var(--peri-200);
    --chart-seq-1:var(--navy-700); --chart-seq-2:var(--cobalt-700); --chart-seq-3:var(--cobalt-600); --chart-seq-4:var(--cobalt-500);
    --chart-seq-5:var(--cobalt-400); --chart-seq-6:var(--cobalt-300); --chart-seq-7:var(--peri-200); --chart-seq-8:var(--peri-100);
    --chart-diverging-pos:var(--cobalt-400); --chart-diverging-mid:var(--ink-600); --chart-diverging-neg:var(--danger-500);
    --chart-good:var(--success-500); --chart-warning:var(--warning-500); --chart-danger:var(--danger-500);
    --chart-good-text:var(--success-500); --chart-danger-text:#F08A82;
    --chart-grid:rgba(255,255,255,.10); --chart-axis:rgba(255,255,255,.18); --chart-text:var(--text-secondary); --chart-text-muted:var(--text-tertiary);
  }
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --surface-page:var(--navy-950);
  --surface-card:#151C4A;
  --surface-sunken:#0B0F2C;
  --surface-brand:var(--cobalt-500);
  --surface-dark:var(--navy-800);
  --surface-overlay:rgba(7,10,30,.7);
  --text-primary:#EEF1FB;
  --text-secondary:#C3CBEA;
  --text-tertiary:#8D97C2;
  --text-link:var(--cobalt-300);
  --text-on-brand:var(--white);
  --text-on-brand-muted:var(--peri-200);
  --text-inverse:var(--ink-900);
  --border-subtle:rgba(255,255,255,.10);
  --border-default:rgba(255,255,255,.18);
  --border-strong:rgba(255,255,255,.32);
  --border-focus:var(--cobalt-400);
  --accent:var(--cobalt-400);
  --accent-text:var(--cobalt-300);
  --accent-soft:rgba(52,131,255,.14);
  --accent-line:rgba(142,188,251,.35);
  --action-primary:var(--cobalt-500); --action-primary-hover:var(--cobalt-400); --action-primary-active:var(--cobalt-300);
  --action-accent:var(--cobalt-300); --action-accent-hover:var(--peri-200); --action-accent-active:var(--peri-100);
  --alert-solid:var(--orange-500); --alert-solid-hover:var(--orange-400); --alert-solid-active:var(--orange-600);
  --alert-on-solid:var(--ink-950);
  --alert-surface:rgba(232,135,31,.18);
  --alert-text:var(--orange-400);
  --alert-border:rgba(236,171,76,.5);
  --status-good:var(--success-500); --status-good-surface:rgba(44,181,106,.18); --status-good-text:var(--success-500);
  --status-warning:var(--warning-500); --status-warning-surface:rgba(232,160,50,.18); --status-warning-text:var(--warning-500);
  --status-danger:var(--danger-500); --status-danger-surface:rgba(226,72,61,.18); --status-danger-text:#F08A82;
  --shadow-card:0 1px 2px rgba(0,0,0,.4);
  --chart-surface:var(--surface-card);
  --chart-1:var(--cobalt-500);
  --chart-2:var(--cobalt-700);
  --chart-3:var(--cobalt-300);
  --chart-other:var(--ink-500);
  --chart-alert:var(--orange-500);
  --chart-ordinal-1:var(--cobalt-700); --chart-ordinal-2:var(--cobalt-500); --chart-ordinal-3:var(--cobalt-400);
  --chart-ordinal-4:var(--grad-stop-light); --chart-ordinal-5:var(--peri-200);
  --chart-seq-1:var(--navy-700); --chart-seq-2:var(--cobalt-700); --chart-seq-3:var(--cobalt-600); --chart-seq-4:var(--cobalt-500);
  --chart-seq-5:var(--cobalt-400); --chart-seq-6:var(--cobalt-300); --chart-seq-7:var(--peri-200); --chart-seq-8:var(--peri-100);
  --chart-diverging-pos:var(--cobalt-400); --chart-diverging-mid:var(--ink-600); --chart-diverging-neg:var(--danger-500);
  --chart-good:var(--success-500); --chart-warning:var(--warning-500); --chart-danger:var(--danger-500);
  --chart-good-text:var(--success-500); --chart-danger-text:#F08A82;
  --chart-grid:rgba(255,255,255,.10); --chart-axis:rgba(255,255,255,.18); --chart-text:var(--text-secondary); --chart-text-muted:var(--text-tertiary);
}