/* ChopGate meaning tokens. Contrast is remeasured in qa/contrast.mjs. */
:root {
  --bg: #0a0d1a;
  --bg-glass: rgba(10, 13, 26, 0.82);
  --surface: #121730;
  --surface-2: #1a2142;
  --surface-3: #222a52;
  --border: #2a3152;
  --border-strong: #3a4470;
  --hairline: rgba(163, 172, 199, 0.16);
  --text: #e8ecf8;
  --muted: #a3acc7;
  --faint: #7d87a6;
  --accent: #5b9dff;
  --accent-hover: #7bb1ff;
  --accent-soft: rgba(91, 157, 255, 0.12);
  --accent-text: #0a0d1a;
  --focus: #9cc2ff;
  --ok: #4ade80;
  --ok-soft: rgba(74, 222, 128, 0.14);
  --hold: #fbbf24;
  --hold-soft: rgba(251, 191, 36, 0.10);
  --danger: #ff7a7a;
  --danger-soft: rgba(255, 122, 122, 0.10);
  --frozen: #9fb4ff;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-chip: 999px;
  --tap: 44px;
  --field: 48px;
  --gap: 8px;
  --font-body: "IBM Plex Sans", sans-serif;
  --font-heading: "Sora", sans-serif;
  --font-mark: "Michroma", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 14px;
  --text-body: 16px;
  --text-lead: 18px;
  --text-lg: 20px;
  --text-xl: 28px;
  --text-2xl: 40px;
  --dur-press: 120ms;
  --dur-state: 180ms;
  --dur-panel: 200ms;
  --dur-scene: 500ms;
  --header-h: 72px;
}

@font-face {
  font-family: "Michroma";
  src: url("../fonts/Michroma-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sora";
  src: url("../fonts/Sora-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-VariableFont_wdth%2Cwght.ttf") format("truetype");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}