/* ============================================================
   Design Tokens – Pollmeier Corporate Design
   ACHTUNG: Hex-Werte sind Annäherungen an die im CD genannten
   Farbnamen. Sobald die echten Werte aus der Media Library da
   sind, nur diese Datei anpassen.
   ============================================================ */
:root {
  /* --- Primärfarben --- */
  --monza:          #C7031E;   /* Buttons, primäre Aktionen */
  --logo-red:       #E3000F;   /* Balken im Logo */
  --monza-dark:     #A20218;

  /* --- Sekundärfarben --- */
  --shadow-green:   #9AC0B6;   /* Akzent, Navigation, Fortschritt */
  --shadow-green-d: #6E9A8E;
  --shadow-green-l: #E4EEEB;
  --tiara:          #C3D1D1;
  --geyser:         #D4DFE2;   /* Rahmen, Trenner */
  --porcelain:      #EFF2F3;   /* Seitenhintergrund */

  /* --- Neutrale --- */
  --ink:            #1E2A2E;
  --ink-soft:       #5A6B70;
  --ink-mute:       #8B9A9E;
  --white:          #FFFFFF;

  /* --- Status --- */
  --ok:             #2E7D5B;
  --ok-bg:          #E6F2EC;
  --warn:           #B26A00;
  --warn-bg:        #FDF1E0;
  --late:           #C7031E;
  --late-bg:        #FBE9EB;

  /* --- Typografie ---
     Morgan Sans / UniversNextPro liegen nicht als Webfont vor.
     Jost bzw. Inter dienen als optische Platzhalter.            */
  --font-head: 'Jost', 'Morgan Sans', 'Century Gothic', system-ui, sans-serif;
  --font-body: 'Inter', 'UniversNextPro', 'Univers', 'Helvetica Neue', Arial, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.9375rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;

  /* --- Maße --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-1: 0 1px 2px rgba(30,42,46,.08);
  --shadow-2: 0 4px 16px rgba(30,42,46,.10);
  --shadow-3: 0 12px 40px rgba(30,42,46,.18);

  --sidebar-w: 250px;
  --topbar-h: 60px;

  color-scheme: light;
}

/* ---------- Dunkles Design ----------
   Dieselbe Palette, ins Dunkle gedreht: die Tinte wird zur Fläche,
   das Grün bleibt der Akzent, das Rot wird einen Ton heller, damit
   es auf dunklem Grund trägt. Umschalter sitzt in der Topbar.      */
html[data-theme="dunkel"] {
  --monza:          #D9203A;
  --monza-dark:     #B31126;

  --shadow-green:   #7FA99D;
  --shadow-green-d: #8FBCAF;
  --shadow-green-l: #24332E;
  --tiara:          #3D4E55;
  --geyser:         #33424A;   /* Rahmen, Trenner */
  --porcelain:      #141C1F;   /* Seitenhintergrund */

  --ink:            #E6ECEA;
  --ink-soft:       #A9BAB8;
  --ink-mute:       #7A8B8C;
  --white:          #1E2A2E;   /* Flächen (Karten, Eingaben) */

  --ok:             #58B98C;
  --ok-bg:          #1E332A;
  --warn:           #E0A24B;
  --warn-bg:        #33290F;
  --late:           #E4586B;
  --late-bg:        #3A2026;

  --shadow-1: 0 1px 2px rgba(0,0,0,.35);
  --shadow-2: 0 4px 16px rgba(0,0,0,.40);
  --shadow-3: 0 12px 40px rgba(0,0,0,.55);

  color-scheme: dark;
}