/* Breakingbits design system — tokens.
   Palet (--bb-*) uit website/style.css; daarop de semantische tokens die
   alle apps gebruiken. Een merk overschrijft de semantische tokens in zijn
   thema (/-/theme.css), nooit het palet. */
:root {
  --bb-blue: #244399;
  --bb-blue-deep: #15275a;
  --bb-white: #ffffff;
  --bb-black: #000000;
  --bb-sky: #d3dcf3;
  --bb-pink: #f6cff4;
  --bb-paper: #eef1f9;
  --bb-red: #e0004d;

  --surface: var(--bb-blue);
  --surface-deep: var(--bb-blue-deep);
  --ink: var(--bb-white);
  --panel: var(--bb-white);
  --on-panel: var(--bb-blue);
  --card: var(--bb-sky);
  --on-card: var(--bb-blue-deep);
  --label: var(--bb-pink);
  --accent: var(--bb-pink);
  --on-accent: var(--bb-blue-deep);
  --paper: var(--bb-paper);
  --live: var(--bb-red);
  --on-live: var(--bb-white);
  --focus: var(--bb-pink);
  --danger: #b00020;

  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --space-1: 6px;
  --space-2: 16px;
  --space-3: 32px;
  --space-4: 56px;
  --space-5: 96px;
  --radius: 0px;
  --border-thin: 3px;
  --border-heavy: 10px;
  --max: 1200px;
}