/* TOPerformance · Design-Tokens v1.0 · 2026-10-02
   EINZIGE Quelle für Farben, Schriften, Abstände, Radien.
   Komponenten nutzen nur var(--…), nie rohe Hex-Werte. */
:root{
  /* Markenfarben (fix, nicht themenabhängig) */
  --top-bronze: #78664D;
  --top-bronze-hell: #B49B76;
  --top-graphit: #1F1E1C;
  --top-offwhite: #F3F0EA;
  --top-weiss: #FFFFFF;
  /* Skalen */
  --top-n0: #FFFFFF;
  --top-n50: #F8F6F2;
  --top-n100: #F3F0EA;
  --top-n200: #E4DFD6;
  --top-n300: #CFC8BC;
  --top-n400: #A9A197;
  --top-n500: #7F786F;
  --top-n600: #5C5650;
  --top-n700: #3D3935;
  --top-n800: #2A2826;
  --top-n900: #1F1E1C;
  --top-b50: #F5EFE6;
  --top-b100: #E8DCC9;
  --top-b200: #D6C4A6;
  --top-b300: #C4AD88;
  --top-b400: #B49B76;
  --top-b500: #97805F;
  --top-b600: #78664D;
  --top-b700: #5F503C;
  --top-b800: #45392B;
  /* Schriften */
  --font-display: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --font-text: 'Barlow', Arial, sans-serif;
  --font-ui: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  /* Abstände (4er-Raster) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  /* Radien */
  --radius-none: 0;
  --radius-control: 2px;
  --radius-field: 10px;
  --radius-card: 14px;
  --radius-panel: 22px;
  --radius-pill: 999px;
  /* Rollen · Hell (Standard: Web, Akademie, Reports, Print) */
  --bg: #FFFFFF;
  --bg-muted: #F3F0EA;
  --surface: #FFFFFF;
  --surface-2: #F8F6F2;
  --text: #1F1E1C;
  --text-muted: #5C5650;
  --border: #E4DFD6;
  --accent: #78664D;
  --accent-hover: #5F503C;
  --on-accent: #FFFFFF;
  --primary: #1F1E1C;
  --primary-hover: #3D3935;
  --on-primary: #FFFFFF;
  --focus: #B49B76;
  --good: #3F7D58;
  --warn: #B7791F;
  --warn-text: #8F5E14;
  --bad: #B23A32;
  --info: #3E6A8A;
  --z1: #2F7585;
  --z2: #5F8F45;
  --z3: #A88A2A;
  --z4: #B8642A;
  --z5: #B23F30;
}
/* Rollen · Dunkel (Plattform, Studio-Screens). Aktivieren mit <html data-theme="dark"> */
[data-theme="dark"]{
  --bg: #141009;
  --bg-muted: #1E1913;
  --surface: #1E1913;
  --surface-2: #241E16;
  --text: #F4EFE6;
  --text-muted: #8A8072;
  --border: rgba(255,238,210,0.09);
  --accent: #C2A46E;
  --accent-hover: #D1B684;
  --on-accent: #141009;
  --primary: #F4EFE6;
  --primary-hover: #FFFFFF;
  --on-primary: #141009;
  --focus: #C2A46E;
  --accent-dim: #64563C;
  --good: #8DBF72;
  --warn: #E0904A;
  --warn-text: #E0904A;
  --bad: #D9614E;
  --info: #7FA9C9;
  --z1: #3E8FA0;
  --z2: #8DB86A;
  --z3: #D6B85A;
  --z4: #E08A45;
  --z5: #D65A48;
}
html{font-variant-numeric:tabular-nums}