/* ============================================================
   MUSTER — 15th MEU Command Platform
   tokens.css — design foundations (color roles, type, space, radius, elevation)
   Dark theme only. All values WCAG-AA checked against their intended surface.
   ============================================================ */

:root {
  /* ---- Raw brand palette (unit colors, do not use directly in components) ---- */
  --scarlet: #912114;
  --scarlet-deep: #76190f;
  --scarlet-black: #330403;
  --gold: #f1b824;
  --gold-2: #ebb445;
  --bright-red: #cc0000;
  --khaki: #c3c39c;
  --brand-gradient: linear-gradient(90deg, #912114, #330403);

  /* ---- Surfaces / elevation (unit palette: #1b1b1b page over layered greys) ---- */
  --bg-canvas:   #1b1b1b;   /* app background (unit manifest background_color) */
  --bg-sunken:   #191919;   /* input wells, inset areas */
  --surface-1:   #202020;   /* nav, sidebar, chrome panels */
  --surface-2:   #242424;   /* default card / row surface */
  --surface-3:   #2c2c2c;   /* hover, popovers, active row */
  --surface-4:   #333333;   /* table head, top-most menus */
  --hairline:    #101010;   /* hard panel edges, shadow seat */

  /* Borders: unit hairline is rgba(255,255,255,0.14) */
  --line-1: rgba(255,255,255,0.09);   /* faint inner divider (seat rows) */
  --line-2: rgba(255,255,255,0.14);   /* default panel edge */
  --line-3: rgba(255,255,255,0.22);   /* input border, stronger */
  --line-scarlet: rgba(145,33,20,0.6);

  /* ---- Text ---- */
  --text-1: #f4f4f4;   /* primary body/heading */
  --text-2: #cccccc;   /* secondary body */
  --text-3: #a9a9a9;   /* muted / meta (6.6:1 on surface-2) */
  --text-label: #c3c39c;   /* khaki: section labels, headings */
  --text-inverse: #1b1b1b; /* text on gold / bright fills */
  --text-on-scarlet: #ffffff;

  /* ---- Accent (scarlet primary + gold highlight) ---- */
  --accent: #912114;
  --accent-hover: #a4231b;
  --accent-active: #76190f;
  --accent-quiet: rgba(145,33,20,0.20);   /* tint fills, active nav */
  --accent-quiet-2: rgba(145,33,20,0.32);
  --accent-text: #ff6b5c;   /* scarlet-family text/icon on dark (AA validated) */

  --gold-accent: #f1b824;
  --gold-quiet: rgba(241,184,36,0.14);
  --gold-edge: #ca8416;     /* muted gold for borders (callsign chip) */
  --focus-ring: #f1b824;    /* gold focus ring */

  /* ---- Semantic status language (unit tokens) ----
     green = good/eligible | amber = caution/attention |
     red = problem/denial  | grey = closed/inactive | info = neutral notice */
  --ok:        #7dc981;   --ok-text:   #7dc981;   --ok-quiet:   rgba(125,201,129,0.14);
  --warn:      #e5a83b;   --warn-text: #e5a83b;   --warn-quiet: rgba(229,168,59,0.14);
  --danger:    #ff6b5c;   --danger-text:#ff6b5c;  --danger-quiet:rgba(255,107,92,0.14);
  --danger-fill:#8c101c;
  --info:      #8ab8d0;   --info-text: #8ab8d0;   --info-quiet: rgba(138,184,208,0.14);
  --idle:      #a9a9a9;   --idle-text: #a9a9a9;   --idle-quiet: rgba(255,255,255,0.08);

  /* Rank tier accents (chips) */
  --tier-officer: var(--gold-2);
  --tier-warrant: #cbb06a;
  --tier-snco:    var(--accent-text);
  --tier-nco:     #c9c2a8;
  --tier-junior:  var(--text-3);

  /* ---- Typography ----
     System stack: sharp, legible, no external fonts. */
  --font-sans: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Roboto Mono", Menlo, monospace;

  /* Type scale (px). Dense-first. */
  --fs-display: 30px;  --lh-display: 1.06;
  --fs-h1: 22px;       --lh-h1: 1.15;
  --fs-h2: 17px;       --lh-h2: 1.2;
  --fs-h3: 14px;       --lh-h3: 1.25;
  --fs-body: 13.5px;   --lh-body: 1.45;
  --fs-sm: 12px;       --lh-sm: 1.4;
  --fs-label: 11px;    --lh-label: 1.25;   /* uppercase tracked */
  --fs-micro: 10px;    --lh-micro: 1.2;

  --track-label: 0.09em;
  --track-caps: 0.06em;

  /* ---- Spacing (4px base) ---- */
  --sp-1: 2px;  --sp-2: 4px;  --sp-3: 6px;  --sp-4: 8px;  --sp-5: 12px;
  --sp-6: 16px; --sp-7: 20px; --sp-8: 24px; --sp-9: 32px; --sp-10: 40px; --sp-12: 56px;

  /* ---- Radius (unit system: 6px controls, 10px panels) ---- */
  --r-1: 3px;  --r-2: 6px;  --r-3: 10px;  --r-4: 12px;  --r-pill: 999px;

  /* ---- Elevation (flat by default; one shadow for floating things) ---- */
  --el-1: 0 1px 3px rgba(0,0,0,0.5);
  --el-2: 0 1px 3px rgba(0,0,0,0.5), 0 6px 18px rgba(0,0,0,0.4);
  --el-3: 0 8px 28px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.5);
  --el-modal: 0 24px 70px rgba(0,0,0,0.7), 0 2px 0 rgba(255,255,255,0.05) inset;

  /* Layout metrics */
  --nav-w: 232px;
  --nav-w-collapsed: 60px;
  --topbar-h: 54px;
  --maxw: 1680px;

  --dur-fast: 90ms;
  --dur: 150ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
}

/* ============================================================
   Base reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: none;
}
h1, h2, h3, h4, p, figure { margin: 0; }
button { font: inherit; color: inherit; }
a { color: var(--gold-accent); text-decoration: none; }
a:hover { color: var(--gold-2); text-decoration: underline; text-underline-offset: 2px; }
img { display: block; max-width: 100%; }
::selection { background: var(--accent-quiet-2); color: var(--text-1); }

/* Focus: gold ring, always visible for keyboard users */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-2);
}

/* Scrollbars, dark and quiet */
* { scrollbar-width: thin; scrollbar-color: #3a3a3a transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #333; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #454545; background-clip: padding-box; }

/* ---- Shared type primitives ---- */
.u-label {
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-label);
  font-weight: 600;
}
.u-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.u-tnum { font-variant-numeric: tabular-nums; }
.u-muted { color: var(--text-3); }
.u-caps { text-transform: uppercase; letter-spacing: var(--track-caps); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}