/*
 * TTC Bammental design tokens, generated by hand from docs/design/tokens.json (main source, keep in sync).
 * Naming: colours as --color-<token>, everything else under its tokens.json name
 * (--space-*, --radius-*, --shadow-*), type scale as --type-<style> (font-size) plus
 * --tracking-<style> where tokens.json defines a letterSpacing, --leading-<style> (line-height)
 * and --weight-<style> (font-weight).
 * Preview aliases (--bg, --surface, ..., --font-sans) at the end: the component previews in
 * docs/design/from-artifact/components/<Name>/preview.html use the bare tokens.json names, their CSS works 1:1.
 */
:root, [data-theme="dark"] {
  /* color (theme "dunkel") */
  --color-bg: #0a0e1a;
  --color-surface: #121829;
  --color-line: rgba(244, 241, 234, 0.09);
  --color-ink: #f4f1ea;
  --color-mute: #8a90a2;
  --color-mute-2: #5c6378;
  --color-signal: #ff5b24;
  --color-signal-text: #ff8a3d;
  --color-on-signal: #0a0e1a;
  --color-win: #10b981;
  --color-loss: #f05252;
  --color-draw: #8a90a2;
  --color-wappen-rot: #b41818;
  --color-wappen-grau: #cccccc;

  /* type: families */
  --font-display: Anton, "Arial Narrow", Impact, sans-serif;
  --font-body: Archivo, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* type: scale (font-size) */
  --type-score-xl: 220px;
  --type-score-md: 96px;
  --type-display-lg: 72px;
  --type-display-md: 40px;
  --type-title: 34px;
  --type-match: 28px;
  --type-body: 17px;
  --type-small: 14px;
  --type-kicker: 14px;
  --type-label: 12px;
  --type-stat: 20px;

  /* type: letter-spacing */
  --tracking-display-lg: 0.01em;
  --tracking-kicker: 0.12em;
  --tracking-label: 0.14em;

  /* type: line-height */
  --leading-score-xl: 1;
  --leading-score-md: 1;
  --leading-display-lg: 0.95;
  --leading-display-md: 1;
  --leading-title: 40px;
  --leading-match: 34px;
  --leading-body: 27px;
  --leading-small: 20px;
  --leading-kicker: 20px;
  --leading-label: 16px;
  --leading-stat: 24px;

  /* type: font-weight */
  --weight-display: 400;
  --weight-title: 800;
  --weight-match: 700;
  --weight-body: 400;
  --weight-body-strong: 600;
  --weight-small: 400;
  --weight-kicker: 700;
  --weight-label: 700;
  --weight-stat: 800;

  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 40px;
  --space-12: 88px;

  /* radius */
  --radius-sm: 8px;
  --radius-lg: 18px;
  --radius-pill: 99px;

  /* shadow (only under the Wappen on dark bg, cards get lines) */
  --shadow-wappen: 0 30px 60px rgba(0, 0, 0, 0.6);

  /* layout */
  --content-max: 1080px;
}
[data-theme="light"] {
  /* color (theme "hell") */
  --color-bg: #f4f1ea;
  --color-surface: #ffffff;
  --color-line: #e7e0d0;
  --color-ink: #0a0e1a;
  --color-mute: #5f6573;
  --color-mute-2: #8b8577;
  --color-signal: #ff5b24;
  --color-signal-text: #c2410c;
  --color-on-signal: #0a0e1a;
  --color-win: #0f7a4e;
  --color-loss: #b91c1c;
  --color-draw: #5f6573;
}

/*
 * Preview aliases. Declared on every theme root, not only on :root: a var() inside a custom
 * property is resolved where it is declared, an alias set only on :root would keep the dark value
 * inside a [data-theme="light"] subtree.
 */
:root, [data-theme] {
  --bg: var(--color-bg);
  --surface: var(--color-surface);
  --line: var(--color-line);
  --ink: var(--color-ink);
  --mute: var(--color-mute);
  --mute-2: var(--color-mute-2);
  --signal: var(--color-signal);
  --signal-text: var(--color-signal-text);
  --on-signal: var(--color-on-signal);
  --win: var(--color-win);
  --loss: var(--color-loss);
  --draw: var(--color-draw);
  --wappen-rot: var(--color-wappen-rot);
  --wappen-grau: var(--color-wappen-grau);
  --font-sans: var(--font-body);
}