/* tokens.css — tier 0 tokens.
 * Owns: :root custom properties (incl. their width/phone overrides) and the
 * vendored @font-face faces. */

/* ── CSS Variables */
:root {
  /* ── Scales (style unification 2026-10-31, docs/TOKENS-2026-10-31.md).
   * Every size, space, radius, elevation, tracking and overlay in css/ snaps
   * to one of these; change density or type here, not per file. ── */
  --fs-2xs: 10px; --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-base: 14px;
  --fs-lg: 16px;  --fs-xl: 18px; --fs-2xl: 22px; --fs-3xl: 28px; --fs-display: 48px;
  --sp-1: 2px; --sp-2: 4px; --sp-3: 6px; --sp-4: 8px; --sp-5: 10px; --sp-6: 12px;
  --sp-7: 14px; --sp-8: 16px; --sp-9: 20px; --sp-10: 24px; --sp-11: 32px;
  --sp-12: 40px; --sp-13: 48px; --sp-14: 56px; --sp-15: 64px;
  --radius-xs: 3px; --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.35);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.75);
  --tr-tight: 0.02em; --tr-normal: 0.04em; --tr-wide: 0.06em; --tr-wider: 0.08em; --tr-widest: 0.12em;
  --ov-1: rgba(255,255,255,0.04); --ov-2: rgba(255,255,255,0.06); --ov-3: rgba(255,255,255,0.08);
  --ov-4: rgba(255,255,255,0.12); --ov-5: rgba(255,255,255,0.18); --ov-6: rgba(255,255,255,0.25);
  --sh-1: rgba(0,0,0,0.15); --sh-2: rgba(0,0,0,0.25); --sh-3: rgba(0,0,0,0.4); --sh-4: rgba(0,0,0,0.6);

  --bg: #18181b;
  --panel-bg: #22222a;
  --panel-alt: #28282f;
  --accent: #ffffff;
  --accent-hover: #cccccc;
  --accent-dark: #aaaaaa;
  --accent-rgb: 255, 255, 255;
  --accent-on: #111111;
  --text: #e0e0e0;
  --text-muted: #a8a8a8;
  --border: #3a3a44;
  --border-light: #4a4a54;
  --success: #2ecc71;
  --warning: #f39c12;
  --danger: #e74c3c;
  --card-bg: #2c2c34;
  --card-hover: #34343c;
  --radius: 6px;
  --radius-lg: 10px;
  --shadow: 0 2px 8px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.7);
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
  --font-mono: 'Consolas', 'Monaco', 'Courier New', monospace;
  --font-display: 'Cinzel', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body: var(--font);
  /* Tokens below were REFERENCED by ~50 rules across css/ but never defined
   * here — every call site silently took its own hardcoded fallback instead
   * (stopsign002/yetanotherarmybuilder#65). Harmless under this theme only
   * because the fallbacks happened to match this palette; under any other
   * theme (e.g. Neo-Brutalist before it patched around this with its own
   * "GHOST TOKENS" block) those same rules painted black boxes on a white
   * page. Mapped to the real token each one clearly meant; a couple with no
   * existing analogue (a translucent surface veil, a smaller radius) get a
   * literal value equal to what every call site's fallback already agreed on.
   * `css/themes/brutalist.css` still overrides the live subset of these with
   * its own nb-* values — same base+override pattern as --accent/--text/
   * --border above, not made redundant by this block existing. */
  --surface: var(--panel-bg);
  --surface-2: rgba(255, 255, 255, 0.05);
  --surface2: var(--surface-2);
  /* same concept as --surface-2, different name — alias rather than a second value */
  --panel-bg-2: var(--bg);
  --bg-alt: var(--bg);
  --bg-input: rgba(0, 0, 0, 0.25);
  --hover-bg: var(--card-hover);
  --border-subtle: rgba(255, 255, 255, 0.14);
  --radius-sm: 4px;
  --radius-md: var(--radius);
  --ui-font: var(--font);
  /* ── Main Layout */
  /* Left pane (army list) widened ~10% from the original 300px so the
   * attached-unit cluster cards have room to breathe — Necron multi-
   * attach was the worst case but every leader+bodyguard cluster
   * benefits. Drag-to-resize (js/app/resize.js) still lets the user
   * widen further or tighten back down. */
  --col-left: 330px;
  --col-right: 420px;
  /* ── status colors (shared variables) */
  --coll-done: #a8e6b7;
  --reserves-accent: var(--accent);
  --reserves-warn: #e6c7a8;
  /* dusty pink — shared with requisitions.css */
  --requisitions-accent: #d39ec5;
  /* dusty pink */
  --topbar-h: 56px;
  --topbar-bg: rgba(20, 20, 24, 0.82);
  --topbar-border: rgba(var(--accent-rgb), 0.22);
  --topbar-pad-x: 18px;
  --topbar-blur: 14px;
  /* ── Signed-out banner (js/app/signed-out-banner.js)
   * Fixed, not in flow: the app's panes are sized from 100vh / 100% of the
   * body, so an in-flow strip would push the bottom of every pane off-screen.
   * Instead the module sets --sob-h to the strip's measured height and the
   * body class below makes room for it (padding on phones, mode-page height on
   * desktop). Sits under the topbar (z 400) on desktop, at the very top on
   * phones (the topbar is display:none there), and below the tab bar
   * (z 950/1200) and modals. */
  --sob-h: 0px;
  --yaab-card-radius: 8px;
  --yaab-card-pad: 12px;
  --yaab-card-pad-tight: 6px 8px;
  --yaab-card-bg: var(--card-bg);
  --yaab-card-bg-hover: var(--card-hover);
  --yaab-card-border-soft: var(--border);
  --yaab-card-accent: var(--accent);
  --yaab-card-accent-rgb: var(--accent-rgb);
  --yaab-card-shadow-h: 0 6px 18px rgba(0, 0, 0, 0.35);
  --yaab-card-shadow-a: 0 0 0 2px rgba(var(--yaab-card-accent-rgb), 0.28);
  --yaab-card-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── @font-face: vendored Cinzel woff2 (offline-safe) */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../js/vendor/fonts/cinzel-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../js/vendor/fonts/cinzel-600.woff2') format('woff2');
}

/* ── @font-face: vendored EB Garamond woff2 (offline-safe)
 * Body serif for the "Industrial Stencil" datacard template
 * (css/cards-mode.css). Variable woff2 (latin subset) — one roman file
 * covers the 400–700 range, one italic file. Bundled like Cinzel so the
 * card skin renders identically offline and through the print pipeline. */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../js/vendor/fonts/ebgaramond.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../js/vendor/fonts/ebgaramond-italic.woff2') format('woff2');
}

@media (max-width: 1200px) {
  /* ── Responsive */
  :root { --col-left: 290px; --col-right: 360px; }
}

@media (max-width: 820px) {
  /* ── Tokens (mobile-only) */
  :root {
    --m-tabbar-h: 56px;
    --m-pts-pill-h: 44px;
    /* Safe-area insets: 0 on devices that don't expose them. */
    --m-safe-top: env(safe-area-inset-top, 0px);
    --m-safe-bottom: env(safe-area-inset-bottom, 0px);
    --m-safe-left: env(safe-area-inset-left, 0px);
    --m-safe-right: env(safe-area-inset-right, 0px);
  }
}