/* Shhhs visual tokens, adapted from the Cybersight reference.
   Decision: docs/shhhs-rebuild/2026-09-14-cybersight-visual-direction.md */
:root {
  color-scheme: dark;
  --font-ui: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --color-bg: #0a0c12;
  --color-surface: #1a1d27;
  --color-surface-muted: #222633;
  --color-surface-soft: #161822;
  --color-text: #e8eaf0;
  --color-text-muted: #a4a9b8;
  --color-text-subtle: #969dad;
  --color-border: #353b4d;
  --color-border-strong: #727b91;
  --color-primary: #ffef34;
  --color-primary-hover: #fff477;
  --color-primary-soft: #333020;
  --color-on-primary: #0a0c12;
  --color-link: #ffef34;
  --color-success: #58dbad;
  --color-success-soft: #16382f;
  --color-warning: #ffb16e;
  --color-warning-soft: #3b2b20;
  --color-danger: #ff979c;
  --color-danger-soft: #3c242e;
  --color-code-bg: #10131c;
  --color-code-text: #d6e5f2;
  --shadow-subtle: 0 18px 48px rgb(0 0 0 / 0.24);
  --focus-ring: 0 0 0 3px rgb(255 239 52 / 0.22);
  --bg: var(--color-bg);
  --surface: var(--color-surface);
  --surface-muted: var(--color-surface-muted);
  --surface-soft: var(--color-surface-soft);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --subtle: var(--color-text-subtle);
  --line: var(--color-border);
  --line-strong: var(--color-border-strong);
  --accent: var(--color-primary);
  --accent-soft: var(--color-primary-soft);
  --primary: var(--color-primary);
  --primary-dark: var(--color-primary-hover);
  --primary-soft: var(--color-primary-soft);
  --code: var(--color-code-bg);
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
}
body { background: var(--bg); color: var(--text); font-family: var(--font-ui); }
::selection { background: var(--color-primary); color: var(--color-on-primary); }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
input, select, textarea { color-scheme: dark; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-primary); }
code, pre { font-family: var(--font-mono); }

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-400.ttf) format('truetype');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-500.ttf) format('truetype');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-600.ttf) format('truetype');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/space-grotesk-400.ttf) format('truetype');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/space-grotesk-500.ttf) format('truetype');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/space-grotesk-600.ttf) format('truetype');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/space-grotesk-700.ttf) format('truetype');
}