/* ppong.be — design tokens (gegenereerd uit tokens.json). Bouw altijd met var(--token), nooit met hex. */

:root, [data-theme="light"] {
  color-scheme: light;
  --paper: #f6f3ec;
  --paper-raised: #fffdf8;
  --paper-sunken: #ece7dc;
  --line: #dcd4c4;
  --line-strong: #8f8574;
  --ink: #1b1814;
  --ink-muted: #615a50;
  --ball: #f26b1d;
  --on-ball: #1b1814;
  --ball-text: #a5430a;
  --table: #1d4f9e;
  --table-fill: #1d4f9e;
  --on-table-fill: #ffffff;
  --loss: #b8261b;
  --focus: var(--table);
  --code-surface: #1b1814;
  --code-ink: #f4f0e7;
  --code-accent: #ff9a5c;
  --code-muted: #a39b8e;
  --shadow-raised: 0 1px 2px rgba(27,24,20,0.06), 0 6px 16px rgba(27,24,20,0.06);
}

[data-theme="dark"] {
  color-scheme: dark;
  --paper: #15130f;
  --paper-raised: #1f1c17;
  --paper-sunken: #0e0d0a;
  --line: #35312a;
  --line-strong: #7a7265;
  --ink: #f4f0e7;
  --ink-muted: #ada597;
  --ball: #ff7a2e;
  --on-ball: #1b1814;
  --ball-text: #ff9a5c;
  --table: #8db3f2;
  --table-fill: #2a5cae;
  --on-table-fill: #ffffff;
  --loss: #ff8073;
  --focus: var(--table);
  --code-surface: #0e0d0a;
  --code-ink: #f4f0e7;
  --code-accent: #ff9a5c;
  --code-muted: #a39b8e;
  --shadow-raised: 0 1px 2px rgba(0,0,0,0.5), 0 8px 20px rgba(0,0,0,0.4);
}

/* Volgt het systeem als er geen data-theme gezet is */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
  color-scheme: dark;
  --paper: #15130f;
  --paper-raised: #1f1c17;
  --paper-sunken: #0e0d0a;
  --line: #35312a;
  --line-strong: #7a7265;
  --ink: #f4f0e7;
  --ink-muted: #ada597;
  --ball: #ff7a2e;
  --on-ball: #1b1814;
  --ball-text: #ff9a5c;
  --table: #8db3f2;
  --table-fill: #2a5cae;
  --on-table-fill: #ffffff;
  --loss: #ff8073;
  --focus: var(--table);
  --code-surface: #0e0d0a;
  --code-ink: #f4f0e7;
  --code-accent: #ff9a5c;
  --code-muted: #a39b8e;
  --shadow-raised: 0 1px 2px rgba(0,0,0,0.5), 0 8px 20px rgba(0,0,0,0.4);
  }
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-ball: 999px;
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

.display-xl { font-family: var(--font-sans); font-size: 72px; line-height: 68px; font-weight: 800; letter-spacing: -0.03em; }
.display { font-family: var(--font-sans); font-size: 48px; line-height: 50px; font-weight: 800; letter-spacing: -0.025em; }
.h1 { font-family: var(--font-sans); font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -0.015em; }
.h2 { font-family: var(--font-sans); font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.01em; }
.h3 { font-family: var(--font-sans); font-size: 18px; line-height: 24px; font-weight: 600; }
.body-lg { font-family: var(--font-sans); font-size: 18px; line-height: 28px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.score { font-family: var(--font-mono); font-size: 32px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat { font-family: var(--font-mono); font-size: 20px; line-height: 24px; font-weight: 500; font-variant-numeric: tabular-nums; }
.data-sm { font-family: var(--font-mono); font-size: 13px; line-height: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.code { font-family: var(--font-mono); font-size: 14px; line-height: 22px; font-weight: 400; font-variant-numeric: tabular-nums; }