/*
 * Design-Tokens der Plattform (docs/DESIGN.md, Abschnitte 2–4 und 8).
 * Nur Dunkelmodus (Ä-01); ein Hellmodus wäre ein reiner Tausch dieser Werte.
 * Neue Farben nur über eine Ergänzung von docs/DESIGN.md.
 */

:root {
  color-scheme: dark;

  /* 2.1 Flächen */
  --bg-canvas: #0f0f12;
  --bg-ambient: #2a211b;
  --surface-1: #17171a;
  --surface-2: #1b1b1e;
  --surface-3: #1e1e21;
  --surface-input: #141417;
  --surface-pill: #2a2a2d;
  --surface-pill-hover: #333337;
  --surface-active: #4e4e52;
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.18);

  /* 2.2 Text */
  --text-1: #f0f0f0;
  --text-2: #9a9aa0;
  --text-3: #6b6b72;
  --text-inverse: #111113;

  /* 2.3 Akzente */
  --accent: #f0ae66;
  --accent-strong: #e4964e;
  --accent-deep: #d2662a;
  --gold: #f6de60;
  --pos: #5aba66;
  --pos-strong: #489c5a;
  --pos-soft: #7ed290;
  --pos-bg: #1f3028;
  --neg: #d84e5a;
  --neg-strong: #ae3c42;
  --neg-soft: #f08a93;
  --neg-bg: #34202a;
  --tag-bg: #1e185a;
  --tag-text: #bdb7ff;
  --violet: #a78bfa;
  --sky: #6cb6ff;
  --teal: #4fd1c5;

  /* Verläufe (DESIGN 3 und 5) */
  --gradient-accent: linear-gradient(180deg, #f6c27f, #e4964e);
  --gradient-light: linear-gradient(180deg, #f4f4f4, #d0d0d0);
  --gradient-card: linear-gradient(180deg, var(--surface-3), var(--surface-2) 40%, var(--surface-1));

  /* 2.4 Leuchten */
  --glow-pos: inset 0 -2px 0 rgba(90, 186, 102, 0.55), 0 14px 28px -18px rgba(90, 186, 102, 0.55);
  --glow-neg: inset 0 -2px 0 rgba(216, 78, 90, 0.55), 0 14px 28px -18px rgba(216, 78, 90, 0.55);
  --glow-accent: inset 0 -2px 0 rgba(240, 174, 102, 0.55), 0 14px 28px -18px rgba(240, 174, 102, 0.55);
  --glow-pos-light: radial-gradient(80% 60% at 50% 110%, rgba(90, 186, 102, 0.18), transparent 70%);
  --glow-neg-light: radial-gradient(80% 60% at 50% 110%, rgba(216, 78, 90, 0.18), transparent 70%);
  --glow-accent-light: radial-gradient(80% 60% at 50% 110%, rgba(240, 174, 102, 0.16), transparent 70%);
  --dot-glow-pos: 0 0 8px rgba(126, 210, 144, 0.8);
  --dot-glow-accent: 0 0 8px rgba(240, 174, 102, 0.8);
  --dot-glow-neg: 0 0 8px rgba(240, 138, 147, 0.8);
  --focus-ring: 0 0 0 3px rgba(240, 174, 102, 0.25);
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-float: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 48px rgba(0, 0, 0, 0.55);

  /* 3 Typografie */
  --font-sans: "Inter Variable", system-ui, sans-serif;
  --text-display: 600 2.5rem/2.75rem var(--font-sans); /* 40/44 */
  --text-h1: 600 1.75rem/2.125rem var(--font-sans); /* 28/34 */
  --text-h2: 500 1.25rem/1.75rem var(--font-sans); /* 20/28 */
  --text-h3: 500 1rem/1.5rem var(--font-sans); /* 16/24 */
  --text-body: 400 0.875rem/1.25rem var(--font-sans); /* 14/20 */
  --text-table: 400 0.8125rem/1.125rem var(--font-sans); /* 13/18 */
  --text-label: 500 0.75rem/1rem var(--font-sans); /* 12/16 */
  --text-chip: 600 0.625rem/0.875rem var(--font-sans); /* 10/14 */
  --text-value: 600 1.5rem/1.75rem var(--font-sans); /* Werte in Kacheln 24/28 */
  --text-nav: 500 0.9375rem/1.25rem var(--font-sans); /* Menüpunkte 15 px */

  /* 4 Raster, Abstände, Formen */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --content-max: 1600px;
  --page-gutter: 32px;
  --grid-gap: 20px;
  --grid-gap-compact: 16px;
  --header-height: 72px;
  --r-card: 20px;
  --r-tile: 16px;
  --r-input: 12px;
  --r-pill: 999px;
  --r-chip: 6px;

  /* 8 Bewegung */
  --ease: 150ms ease-out;

  /* Ebenen */
  --z-header: 20;
  --z-menu: 30;
  --z-toast: 40;
}

@media (width < 900px) {
  :root {
    --page-gutter: 16px;
    --grid-gap: 16px;
    --header-height: 64px;
  }
}