/* TRMG design tokens, screen edition. Values from Launch Control brand-kits/trmg (Rev 2026.2).

   This is the ONLY file in the repo allowed to hold a raw color. Everything else uses the
   semantic variables below, so the look changes in one place. CI enforces this
   (scripts/check-house-rules.mjs). Work package D replaces this file with the versioned
   design package served from cdn.trmg.cloud/design/<version>/.

   Rule from the brand: orange is the only warm color and means "look here". It is used for
   the preview banner and alerts, never for decoration or charts. */

:root{
  /* ---- Navy / indigo (brand dark) ---- */
  --navy-950:#0E1235;
  --navy-900:#182055;
  --navy-800:#24328C;
  --navy-700:#2A3CA8;

  /* ---- Blue (TRMG Blue is cobalt-500) ---- */
  --cobalt-700:#2356B8;
  --cobalt-600:#2C68DA;
  --cobalt-500:#3483FF;
  --cobalt-400:#5E9CFF;
  --cobalt-300:#8EBCFB;

  /* ---- Light blue tints ---- */
  --peri-200:#C6DBFD;
  --peri-100:#E0ECFE;
  --peri-050:#F1F7FF;

  /* ---- Orange, alert only ---- */
  --orange-700:#B86410;
  --orange-500:#E8871F;
  --orange-400:#ECAB4C;
  --orange-100:#FCEEDD;

  /* ---- Neutrals (ink) ---- */
  --ink-900:#2C2C2C;
  --ink-700:#525252;
  --ink-600:#6B6B6B;
  --ink-400:#9E9E9E;
  --ink-200:#D8D8D8;
  --ink-100:#EBEBEB;
  --ink-050:#F6F6F6;
  --white:#FFFFFF;

  /* ---- Semantic status (system status only) ---- */
  --success-500:#2CB56A;
  --success-100:#DDF6E7;
  --danger-500:#E2483D;
  --danger-100:#FBDDDA;

  /* ---- Gradient stops (the brand's one motif) ---- */
  --grad-stop-deep:#1D1E76;
  --grad-stop-mid:#3B83F9;
  --grad-stop-light:#84B2FD;
  --grad-stop-lightest:#CAD5F1;
  --gradient-header:linear-gradient(160deg, var(--navy-950) 0%, var(--grad-stop-deep) 46%, #2A57C6 78%, var(--grad-stop-mid) 100%);
  --gradient-edge-h:linear-gradient(90deg, #1D1E76 0%, #2742A5 22%, #326CDD 42%, #3B83F9 58%, #66A0FD 78%, #84B2FD 90%, #CAD5F1 100%);
  --edge-thickness:5px;

  /* ---- Type ---- */
  --font-body:"Roboto", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:"Roboto Mono", ui-monospace, Menlo, Consolas, monospace;

  /* ---- Shape ---- */
  --radius:14px;
  --radius-sm:8px;
  --border-width:1.5px;

  /* ---- Light scheme (default) ---- */
  color-scheme:light;
  --surface-page:var(--ink-050);
  --surface-card:var(--white);
  --surface-sunken:var(--ink-100);
  --text-primary:var(--ink-900);
  --text-secondary:var(--ink-700);
  --text-tertiary:var(--ink-600);
  --text-link:var(--cobalt-600);
  --border-subtle:var(--ink-100);
  --border-default:var(--ink-200);
  --accent:var(--cobalt-500);
  --accent-text:var(--cobalt-600);
  --accent-soft:var(--peri-050);
  --accent-line:var(--peri-200);
  --alert-surface:var(--orange-100);
  --alert-text:var(--orange-700);
  --alert-border:var(--orange-400);
  --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);
}

/* ---- Dark scheme: follows the device unless the page sets data-theme ---- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --surface-page:var(--navy-950);
    --surface-card:#151C4A;
    --surface-sunken:#0B0F2C;
    --text-primary:#EEF1FB;
    --text-secondary:#C3CBEA;
    --text-tertiary:#8D97C2;
    --text-link:var(--cobalt-300);
    --border-subtle:rgba(255,255,255,.10);
    --border-default:rgba(255,255,255,.18);
    --accent:var(--cobalt-400);
    --accent-text:var(--cobalt-300);
    --accent-soft:rgba(52,131,255,.14);
    --accent-line:rgba(142,188,251,.35);
    --alert-surface:rgba(232,135,31,.18);
    --alert-text:var(--orange-400);
    --alert-border:rgba(236,171,76,.5);
    --shadow-card:0 1px 2px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --surface-page:var(--navy-950);
  --surface-card:#151C4A;
  --surface-sunken:#0B0F2C;
  --text-primary:#EEF1FB;
  --text-secondary:#C3CBEA;
  --text-tertiary:#8D97C2;
  --text-link:var(--cobalt-300);
  --border-subtle:rgba(255,255,255,.10);
  --border-default:rgba(255,255,255,.18);
  --accent:var(--cobalt-400);
  --accent-text:var(--cobalt-300);
  --accent-soft:rgba(52,131,255,.14);
  --accent-line:rgba(142,188,251,.35);
  --alert-surface:rgba(232,135,31,.18);
  --alert-text:var(--orange-400);
  --alert-border:rgba(236,171,76,.5);
  --shadow-card:0 1px 2px rgba(0,0,0,.4);
}

/* Mission Control site chrome. Colors come only from tokens.css variables. Phone first. */

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;display:flex;flex-direction:column;background:var(--surface-page);color:var(--text-primary);font-family:var(--font-body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--text-link)}
code{font-family:var(--font-mono);font-size:.9em}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- preview banner: the one orange moment, alert only ---- */
.preview-banner{background:var(--alert-surface);color:var(--alert-text);border-bottom:var(--border-width) solid var(--alert-border);padding:8px 16px;font-size:14px;text-align:center}
.preview-banner code{font-weight:700}

/* ---- header: the page's one gradient moment ---- */
.top{background:var(--gradient-header);color:var(--on-header);padding-inline:16px}
.top-in{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:16px 24px;min-height:64px;flex-wrap:wrap;padding-block:12px}
.brand{display:flex;flex-direction:column;gap:2px;color:inherit;text-decoration:none}
.brand .eyebrow{font-family:var(--font-mono);font-weight:700;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-header-eyebrow)}
.brand .prod{font-weight:900;font-size:20px;letter-spacing:-.02em;line-height:1}
.nav{display:flex;gap:4px;flex-wrap:wrap;order:3;width:100%}
.nav a{color:var(--on-header-muted);text-decoration:none;padding:8px 14px;border-radius:999px;font-weight:500;font-size:14px}
.nav a:hover{background:var(--header-pill-hover);color:var(--on-header)}
.nav a[aria-current="page"]{background:var(--header-pill);color:var(--on-header)}
.nav a[aria-disabled="true"]{opacity:.55;pointer-events:none}
.lockup{margin-left:auto;width:120px;height:auto;display:block}
.keyline{height:var(--edge-thickness);background:var(--gradient-edge-h)}
@media (min-width:720px){
  .top{padding-inline:20px}
  .nav{order:0;width:auto;margin-left:12px}
  .lockup{width:190px}
}

/* ---- layout ---- */
.wrap{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:24px 16px 48px;display:flex;flex-direction:column;gap:28px}
@media (min-width:720px){.wrap{padding:36px 20px 64px;gap:36px}}

.eyebrow-ink{font-family:var(--font-mono);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);margin:0 0 8px}
.hero h1{font-weight:900;font-size:clamp(28px,5vw,46px);letter-spacing:-.02em;line-height:1.05;margin:0 0 14px;max-width:22ch}
.hero .lede{font-size:18px;line-height:1.5;color:var(--text-secondary);margin:0;max-width:60ch}

.cards{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:720px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:10px}
.card h2{margin:0;font-size:19px;font-weight:700;letter-spacing:-.01em}
.card p{margin:0;color:var(--text-secondary);font-size:15px}
.card .status{margin-top:auto;padding-top:6px}

.tag{display:inline-block;font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:3px 10px;white-space:nowrap}
.tag.live{background:var(--accent);color:var(--on-header);text-decoration:none}
.tag.live:hover{filter:brightness(1.1)}
.tag.soon{background:var(--accent-soft);color:var(--accent-text);border:var(--border-width) solid var(--accent-line)}

.note{background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius);padding:20px}
.note h2{margin:0 0 8px;font-size:17px;font-weight:700}
.note p{margin:0;color:var(--text-secondary);font-size:15px}

/* ---- footer: build line on every page ---- */
.foot{border-top:var(--border-width) solid var(--border-subtle);color:var(--text-tertiary);font-size:13px;padding:14px 16px;display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:space-between;max-width:1200px;width:100%;margin:0 auto}
.foot a{color:inherit}

/* ---- reference docs: markdown rendered in the shell. Phone first; tables scroll in place. ---- */
.docs-list .card h2 a{color:inherit;text-decoration:none}
.docs-list .card h2 a:hover{color:var(--text-link)}
.docs-list .tag{background:var(--surface-page);color:var(--text-tertiary);border:var(--border-width) solid var(--border-subtle)}
.doc{display:flex;flex-direction:column;gap:20px}
.doc-head .eyebrow-ink a{color:inherit;text-decoration:none}
.doc-head .eyebrow-ink a:hover{text-decoration:underline}
.doc-head h1{font-weight:900;font-size:clamp(26px,5vw,40px);letter-spacing:-.02em;line-height:1.1;margin:0 0 10px}
.doc-meta{margin:0;color:var(--text-tertiary);font-size:14px;max-width:70ch}
.doc-body{background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius);padding:20px 16px;box-shadow:var(--shadow-card);font-size:16px;line-height:1.6;overflow-wrap:anywhere}
@media (min-width:720px){.doc-body{padding:32px 36px;font-size:17px}}
.doc-body>:first-child{margin-top:0}
.doc-body>:last-child{margin-bottom:0}
.doc-body h2{font-size:24px;font-weight:700;letter-spacing:-.01em;margin:2em 0 .6em;padding-top:.8em;border-top:var(--border-width) solid var(--border-subtle)}
.doc-body h3{font-size:19px;font-weight:700;margin:1.6em 0 .5em}
.doc-body h4{font-size:16px;font-weight:700;margin:1.4em 0 .4em}
.doc-body p,.doc-body ul,.doc-body ol,.doc-body blockquote,.doc-body pre,.doc-body .table-wrap{margin:0 0 1em}
.doc-body ul,.doc-body ol{padding-left:1.4em}
.doc-body li{margin:.3em 0}
.doc-body li p{margin:0 0 .5em}
.doc-body li.task{list-style:none;margin-left:-1.4em}
.doc-body li.task input{margin-right:.4em;accent-color:var(--accent)}
.doc-body blockquote{border-left:3px solid var(--accent-line);background:var(--accent-soft);padding:12px 16px;border-radius:0 var(--radius) var(--radius) 0}
.doc-body blockquote p:last-child{margin-bottom:0}
.doc-body code{background:var(--surface-page);border:var(--border-width) solid var(--border-subtle);border-radius:6px;padding:.1em .4em;font-size:.85em}
.doc-body pre{background:var(--surface-page);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius);padding:14px 16px;overflow-x:auto}
.doc-body pre code{background:none;border:0;padding:0;font-size:.9em}
.doc-body hr{border:0;border-top:var(--border-width) solid var(--border-subtle);margin:2em 0}
.doc-body em{color:var(--text-secondary)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius)}
.doc-body table{border-collapse:collapse;width:100%;font-size:14.5px;line-height:1.45}
.doc-body th,.doc-body td{text-align:left;vertical-align:top;padding:9px 12px;border-bottom:var(--border-width) solid var(--border-subtle);min-width:7ch}
.doc-body th{background:var(--surface-page);font-weight:700;white-space:nowrap}
.doc-body tr:last-child td{border-bottom:0}
.doc-body td code{white-space:nowrap}