/* Design Tokens — einzige Quelle für Farben, Spacing, Radius, Schatten, etc.
   Wird als erste Stylesheet in jeder Seite eingebunden. Neue Farben/Werte
   nur hier ergänzen, nicht in einzelnen Seiten oder Komponenten-CSS. */

:root {
  /* Spacing */
  --space-xxs: 4px;
  --space-xs: 6px;
  --space-s: 8px;
  --space-m: 12px;
  --space-l: 16px;
  --space-xl: 20px;
  --space-xxl: 24px;
  --space-xxxl: 32px;

  /* Radius — alles weicher */
  --radius-xs: 4px;
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 14px;
  --radius-xl: 18px;
  --radius-xxl: 24px;
  --radius-full: 9999px;

  /* Colors */
  --color-surface: #ffffff;
  --color-background: #e6f3ff;
  --color-background-Two: #e2e8f0;

  --color-accent: #1a73c8;
  --color-accent-light: #e6f1fb;
  --color-blue-light: #becdff;
  --color-accent-Two: #4f46e5;
  --color-accent-Two-light: #eef2ff;

  /* Lila — Statistik (wie Statistik-Kachel im Admin-Dashboard) */
  --color-purple: #7c3aed;
  --color-purple-dark: #6d28d9;
  --color-purple-mid: #a78bfa;
  --color-purple-light: #ede9fe;
  --color-purple-soft: #f5f3ff;

  --color-darkgray: #374151;
  --color-lightgray: #d1d5db;

  --color-black: #111827;
  --color-dark-blue: #0c1f3d;

  --color-red: #dc2626;
  --color-red-light: #fee2e2;
  --color-orange: #d97706;
  --color-orange-dark: #b45309;
  --color-orange-light: #fef3c7;
  --color-green: #059669;
  --color-green-light: #d1fae5;

  --color-background-Three: #e9ecef;
  --color-text-primary: var(--color-black);

  /* Akzent-Varianten (Verlaufs-/Hover-/Glow-Abstufungen von --color-accent) */
  --color-accent-rgb: 26, 115, 200;
  --color-accent-dark: #155ca0;
  --color-accent-hover: #1565b8;

  /* Slate-/Grau-Textskala — genutzt in den neueren "V2"-Seiten
     (Statistik, Wochenstunden, Stundenzettel, Performance-Reports).
     Bewusst getrennt von --color-darkgray/--color-lightgray/--color-muted:
     andere Werte, nicht einfach zusammenlegen ohne die Seiten optisch
     zu verändern. */
  --color-slate-900: #0f172a;
  --color-slate-800: #1e293b;
  --color-slate-600: #475569;
  --color-slate-500: #64748b;
  --color-slate-400: #94a3b8;
  --color-slate-300: #cbd5e1;
  --color-slate-200: #e5e7eb;
  --color-slate-100: #f1f5f9;
  --color-slate-50: #f8fafc;
  --color-gray-400: #9ca3af;
  --color-border-card: #e8edf3;

  /* Info/Blau-Badges */
  --color-info-bg: #eff6ff;
  --color-info-bg-alt: #dbeafe;
  --color-info-text: #1e40af;

  /* Status: Fehler/Ablehnung (Badges — bewusst getrennt von --color-red/-light) */
  --color-red-dark: #b91c1c;
  --color-red-bg: #fef2f2;
  --color-red-bg-alt: #fecaca;

  /* Status: Erfolg/Freigabe (Badges — bewusst getrennt von --color-green/-light) */
  --color-success: #16a34a;
  --color-success-alt: #22c55e;
  --color-success-bg: #f0fdf4;
  --color-success-bg-alt: #dcfce7;
  --color-success-text: #166534;
  --color-success-dot: #4ade80;

  /* Status: Warten/Hinweis (Badges — bewusst getrennt von --color-orange/-light) */
  --color-warning-bg: #fffbeb;
  --color-warning-border: #fde68a;
  --color-warning-text: #92400e;
  --color-warning-text-dark: #78350f;

  /* Font Sizes */
  --size-xxs: 0.625rem;
  --size-xs: 0.75rem;
  --size-s: 0.875rem;
  --size-m: 1rem;
  --size-l: 1.25rem;
  --size-xl: 1.5rem;
  --size-xxl: 2rem;

  /* Font Weights */
  --weight-xs: 300;
  --weight-s: 400;
  --weight-m: 500;
  --weight-l: 600;
  --weight-xl: 700;

  /* Shadows */
  --shadow-One:
    0px 2px 8px rgba(0, 0, 0, 0.08), 0px 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-Two:
    0px 4px 16px rgba(0, 0, 0, 0.1), 0px 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-Modal: 0 20px 60px rgba(0, 0, 0, 0.18);

  /* Borders */
  --border-One: solid 1px var(--color-lightgray);
  --border-Two: solid 1px var(--color-accent);
  --border-Three: solid 1px var(--color-red);
  --border-cancel: solid 1px var(--color-red);
  --border-Four: solid 1px var(--color-background-Two);

  /* Transitions */
  --transition: 150ms ease;
  --transition-slow: 280ms ease;

  /* Layout */
  --header-height: 60px;
  --footer-height: 100px;

  /* Additional Design Tokens for WerkerHeld */
  --color-muted: #6b7280;
  --radius-v2-card: 14px;
  --radius-v2-btn: 10px;
  --radius-v2-avatar: 8px;

  /* Z-Index */
  --standard-index: 1;
  --blur-index: 2000;
  --menu-index: 2100;

  --font-main: "Geist", sans-serif;
  --gap: var(--space-m);
}