/* ═══════════════════════════════════════════════════════
   Territorial Tools — shared design system
   Single source of truth for fonts, tokens, and global
   a11y rules. Consumed by the Astro layout AND the static
   tools in /replay and /propaganda.
   ═══════════════════════════════════════════════════════ */

/* ── Self-hosted fonts (latin subsets) ─────────────────
   Weight ranges are intentional: each file serves a span
   so no faux-bold synthesis happens for in-between weights. */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 100 799;
  font-display: swap;
  src: url('/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800 950;
  font-display: swap;
  src: url('/fonts/barlow-condensed-latin-900-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 100 950;
  font-display: swap;
  src: url('/fonts/barlow-condensed-latin-900-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 500;
  font-display: swap;
  src: url('/fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 501 950;
  font-display: swap;
  src: url('/fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 950;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
}

/* ── Design tokens ─────────────────────────────────────── */
:root {
  /* surfaces */
  --bg:       #060810;
  --bg2:      #080c14;
  --s1:       #0b1018;
  --s2:       #0f1622;
  --s3:       #141e2c;
  /* borders */
  --b1:       #182030;
  --b2:       #1e2d42;
  --b3:       #283d58;
  /* text — all values pass WCAG AA (≥4.5:1) on --s1 */
  --tx:       #e2ecf3;
  --tx2:      #a9bdcd;
  --mu:       #6b8495;
  --mu2:      #8aa0b2;
  /* orange */
  --or:       #f97316;
  --or-lt:    #fb923c;
  --or-dim:   rgba(249,115,22,.08);
  --or-glow:  rgba(249,115,22,.18);
  /* cyan */
  --cy:       #22d3ee;
  --cy-lt:    #67e8f9;
  --cy-dim:   rgba(34,211,238,.07);
  --cy-glow:  rgba(34,211,238,.15);
  /* green */
  --gr:       #22c55e;
  /* accent aliases (default orange; .accent-cyan flips them) */
  --ac:       var(--or);
  --ac-lt:    var(--or-lt);
  --ac-dim:   var(--or-dim);
  --ac-glow:  var(--or-glow);
  /* type */
  --df: 'Barlow Condensed', sans-serif;
  --db: 'Inter', sans-serif;
  --dm: 'JetBrains Mono', monospace;
  /* type scale — floor for readable microcopy is --fs-3xs */
  --fs-3xs: .72rem;
  --fs-2xs: .78rem;
  --fs-xs:  .84rem;
  --fs-sm:  .92rem;
  --fs-md:  1rem;
  /* layout */
  --r:    6px;
  --rl:   10px;
  --nH:   74px;
  --mW:   1408px;
  --px:   2rem;
}
.accent-orange { --ac: var(--or); --ac-lt: var(--or-lt); --ac-dim: var(--or-dim); --ac-glow: var(--or-glow); }
.accent-cyan   { --ac: var(--cy); --ac-lt: var(--cy-lt); --ac-dim: var(--cy-dim); --ac-glow: var(--cy-glow); }

/* ── Global a11y / polish ──────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--ac, #f97316);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection {
  background: rgba(249,115,22,.32);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}