/* Design tokens — DESIGN.md §2, Projector (dark) column only (DESIGN-DASHBOARD.md).
 * Layout tokens live here; strings live in js/strings.js. Change either in the
 * design docs first, then mirror here. */

@font-face {
  font-family: "Bricolage Grotesque";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/bricolage-grotesque-700.woff2") format("woff2");
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/bricolage-grotesque-800.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/atkinson-hyperlegible-400.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("../assets/fonts/atkinson-hyperlegible-400italic.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/atkinson-hyperlegible-700.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-mono-600.woff2") format("woff2");
}

:root {
  /* DESIGN.md §2.1 — projector (dark) */
  --bh-bg: #17110b;
  --bh-surface: #221913;
  --bh-sunken: #100b07;
  --bh-ink: #f6ecd9;
  --bh-ink-soft: #b7a88f;
  --bh-line: #3a2d1f;
  --bh-amber: #ffb84d;
  --bh-copper: #e07b39;
  --bh-roast: #6e4426;
  --bh-foam: #fff6df;
  --bh-ok: #45c583;
  --bh-warn: #ffa92e;
  --bh-fault: #ff6b57;
  --bh-offline: #837a6d;

  /* State pill backgrounds = state color at 14–18 % alpha (DESIGN.md §2.1) */
  --bh-ok-tint: rgba(69, 197, 131, 0.16);
  --bh-warn-tint: rgba(255, 169, 46, 0.16);
  --bh-fault-tint: rgba(255, 107, 87, 0.16);
  --bh-offline-tint: rgba(131, 122, 109, 0.16);
  --bh-amber-tint: rgba(255, 184, 77, 0.12);

  /* DESIGN-DASHBOARD.md §1 — team identity colors (identity only, never state) */
  --bh-team1: #ffb84d;
  --bh-team2: #6fa8dc;
  --bh-team3: #5bc8c8;
  --bh-team4: #a78bdb;
  --bh-team5: #e58b8b;

  /* DESIGN.md §2.2 — typography */
  --bh-font-display: "Bricolage Grotesque", "Segoe UI Variable Display", "Segoe UI", sans-serif;
  --bh-font-body: "Atkinson Hyperlegible", "Segoe UI", sans-serif;
  --bh-font-mono: "IBM Plex Mono", Consolas, monospace;

  /* DESIGN.md §2.3 — spacing (4 px grid) & radii */
  --bh-space-1: 4px;
  --bh-space-2: 8px;
  --bh-space-3: 12px;
  --bh-space-4: 16px;
  --bh-space-5: 24px;
  --bh-space-6: 32px;
  --bh-space-7: 48px;
  --bh-space-8: 64px;
  --bh-radius-s: 8px;
  --bh-radius-m: 14px;
  --bh-radius-l: 22px;
  --bh-radius-pill: 999px;
}