/* Brand design tokens — mirrored from the Starblind Hub (scripts/hub/static/base.css)
   so the public site matches the internal app. Neutral gray accent on pure black. */

/* Self-hosted fonts (SIL OFL 1.1 — see public/assets/fonts/OFL*.txt). No CDN.
   Space Grotesk = brand/headings/body; Chakra Petch = squared "tech" UI (nav, labels, subtitles). */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/fonts/SpaceGrotesk-300.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/SpaceGrotesk-400.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/SpaceGrotesk-500.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/SpaceGrotesk-700.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/fonts/ChakraPetch-300.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ChakraPetch-400.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ChakraPetch-500.woff2") format("woff2"); }

:root {
  /* Strictly neutral gray-black-white — no blue tint anywhere. */
  --bg: #000000;
  --bg-soft: #0a0a0a;
  --panel: #161616;
  --panel-2: #212121;
  --border: #303030;
  --text: #e9e9e9;
  --muted: #8f8f8f;

  --good: #34d399;
  --warn: #f5a623;
  --bad: #f87171;

  --accent: #a0a0a0;
  --accent-rgb: 160, 160, 160;
  /* Lighter accent for small text/icons ON panel surfaces, to clear WCAG AA (4.5:1). */
  --accent-bright: #d4d4d4;

  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;

  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 8px 28px rgba(0, 0, 0, 0.5);
  --glow: 0 0 24px rgba(var(--accent-rgb), 0.35);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  --mono: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", monospace;
  /* Self-hosted (OFL); system stack as fallback. */
  --font: "Space Grotesk", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  /* Squared, technical face for nav, subtitles, kickers, labels, buttons. */
  --font-tech: "Chakra Petch", "Space Grotesk", system-ui, sans-serif;

  --wrap: 1120px;
  --wrap-narrow: 760px;
  --header-h: 64px;

  /* Gray card surface over the plexus. Gets less transparent on narrower screens
     (the mesh reads denser there) — stepped in site.css media queries. */
  --card-bg: rgba(18, 18, 18, 0.66);
}

[data-accent="gray"] { --accent: #a0a0a0; --accent-rgb: 160, 160, 160; }