/**
 * tablecaptain – variables.css
 *
 * Zentrale Design-Token als CSS Custom Properties.
 * Alle Farben, Abstände, Typografie und Animationsparameter
 * werden hier definiert und applikationsweit referenziert.
 *
 * Inhaltsübersicht:
 * 1. Farben
 * 2. Typografie
 * 3. Spacing
 * 4. Radien & Schatten
 * 5. Animationen
 * 6. Layout
 * 7. Z-Index-Skala
 *
 * @version 1.0.0
 */

:root {

  /* ==========================================================================
     1. FARBEN
     ========================================================================== */

  /* Primärfarbe: Blau – Vertrauen, Navigation, interaktive Elemente.
     Kontrastverhältnis zu Weiß: 4.6:1 → WCAG AA für normalen Text erfüllt. */
  --color-primary:       #1A56DB;
  --color-primary-dark:  #1040B0;  /* Hover/Active-State: 10% dunkler */
  --color-primary-light: #EBF2FF;  /* Hintergründe, Chips, Tags */
  --color-primary-50:    #F0F5FF;  /* Sehr heller Hintergrund für Sections */

  /* Akzentfarbe: Orange – primäre CTAs, Highlights, Erfolgsmomente.
     Kontrastverhältnis zu Weiß: 3.1:1 → WCAG AA für großen Text (>18px) erfüllt. */
  --color-accent:        #F97316;
  --color-accent-dark:   #EA6C0A;  /* Hover/Active-State */
  --color-accent-light:  #FFF7ED;  /* Hintergründe für Akzent-Bereiche */

  /* Neutrale Farben */
  --color-white:         #FFFFFF;
  --color-bg:            #F8FAFC;  /* Seitenhintergrund: kühles Off-White */
  --color-bg-card:       #FFFFFF;  /* Karten-Hintergrund */
  --color-text:          #1E293B;  /* Haupttext: Slate-900 äquivalent */
  --color-text-muted:    #64748B;  /* Sekundärtext: Slate-500 */
  --color-text-subtle:   #94A3B8;  /* Platzhalter, Labels: Slate-400 */
  --color-border:        #E2E8F0;  /* Standard-Border: Slate-200 */
  --color-border-focus:  #1A56DB;  /* Fokus-Border = Primärfarbe */

  /* Semantische Farben */
  --color-success:       #16A34A;
  --color-success-light: #DCFCE7;
  --color-error:         #DC2626;
  --color-error-light:   #FEE2E2;
  --color-warning:       #D97706;
  --color-warning-light: #FEF3C7;
  --color-info:          #0284C7;
  --color-info-light:    #E0F2FE;

  /* Glassmorphism-Token für Header beim Scrollen */
  --glass-bg:            rgba(255, 255, 255, 0.85);
  --glass-blur:          12px;
  --glass-border:        rgba(226, 232, 240, 0.8);


  /* ==========================================================================
     2. TYPOGRAFIE
     ========================================================================== */

  /* Einheitliche Schriftfamilie: Inter – modern, hervorragende Lesbarkeit
     auch bei kleinen Größen, exzellente Deutsche-Umlaute-Unterstützung. */
  --font-sans:           'Inter', system-ui, -apple-system, Arial, sans-serif;

  /* Fluid Typography: clamp(min, bevorzugt, max)
     Formel: min + (max-min) * (viewport - 320) / (1280 - 320)
     Skaliert sanft zwischen 375px und 1280px Viewport-Breite. */
  --text-xs:   clamp(0.70rem, 0.68rem + 0.09vw, 0.75rem);   /* 11–12px  */
  --text-sm:   clamp(0.81rem, 0.78rem + 0.16vw, 0.875rem);  /* 13–14px  */
  --text-base: clamp(0.875rem, 0.83rem + 0.22vw, 1rem);     /* 14–16px  */
  --text-md:   clamp(1rem, 0.95rem + 0.27vw, 1.125rem);     /* 16–18px  */
  --text-lg:   clamp(1.125rem, 1.06rem + 0.33vw, 1.25rem);  /* 18–20px  */
  --text-xl:   clamp(1.25rem, 1.15rem + 0.54vw, 1.5rem);    /* 20–24px  */
  --text-2xl:  clamp(1.5rem, 1.35rem + 0.76vw, 1.875rem);   /* 24–30px  */
  --text-3xl:  clamp(1.875rem, 1.65rem + 1.09vw, 2.25rem);  /* 30–36px  */
  --text-4xl:  clamp(2.25rem, 1.9rem + 1.74vw, 3rem);       /* 36–48px  */
  --text-5xl:  clamp(2.75rem, 2.2rem + 2.72vw, 3.75rem);    /* 44–60px  */

  --font-weight-normal:  400;
  --font-weight-medium:  500;
  --font-weight-semi:    600;
  --font-weight-bold:    700;

  --line-height-tight:   1.2;   /* Headlines */
  --line-height-snug:    1.4;   /* Subheadings */
  --line-height-normal:  1.6;   /* Body text */
  --line-height-relaxed: 1.75;  /* Long-form text */

  --letter-spacing-tight: -0.025em;  /* Große Überschriften */
  --letter-spacing-wide:   0.05em;   /* Eyebrows, Labels */


  /* ==========================================================================
     3. SPACING
     ========================================================================== */

  /* 4px-Basis-Raster – alle Abstände sind Vielfache von 4px.
     Konsistentes vertikales Rhythmus durch das gesamte Layout. */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;


  /* ==========================================================================
     4. RADIEN & SCHATTEN
     ========================================================================== */

  --radius-sm:   6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;  /* Für Pills und Badges */

  /* Schatten: Progressive Elevation für Karten und Overlays.
     Nutzt subtile blaue Tönung statt reines Grau für moderneres Feeling. */
  --shadow-sm:  0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:  0 4px 16px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
  --shadow-lg:  0 10px 40px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-xl:  0 20px 60px rgba(15, 23, 42, 0.16), 0 8px 20px rgba(15, 23, 42, 0.08);
  --shadow-focus: 0 0 0 3px rgba(26, 86, 219, 0.25);  /* Fokus-Ring für Inputs */


  /* ==========================================================================
     5. ANIMATIONEN
     ========================================================================== */

  /* Dauer-Stufen – kurz für Micro-Interactions, lang für Layout-Übergänge */
  --duration-instant:  80ms;
  --duration-fast:    150ms;
  --duration-normal:  200ms;
  --duration-slow:    350ms;
  --duration-slower:  500ms;

  /* Easing-Kurven – eigene Cubic-Beziers für lebendiges Gefühl */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);    /* Overshoot-Effekt */
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);     /* Smooth beidseitig */
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1); /* Leichte Federung */


  /* ==========================================================================
     6. LAYOUT
     ========================================================================== */

  --container-max:    1200px;  /* Maximale Inhaltsbreite */
  --container-narrow:  720px;  /* Schmaler Container für Formulare/Texte */
  --container-wide:   1400px;  /* Breiter Container für Dashboard */
  --header-height:      68px;  /* Sticky-Header-Höhe – auch für scroll-padding-top */
  --sidebar-width:     280px;  /* Dashboard-Sidebar-Breite */


  /* ==========================================================================
     7. Z-INDEX-SKALA
     ========================================================================== */

  /* Explizite Stacking-Kontexte – verhindert z-index-Rattenrennen.
     Jede Ebene hat einen klaren semantischen Zweck. */
  --z-base:       0;    /* Normaler Dokumentfluss */
  --z-above:      1;    /* Leicht erhöhte Elemente (z.B. Karten-Hover) */
  --z-dropdown:  10;    /* Dropdown-Menüs */
  --z-sticky:    20;    /* Sticky-Elemente (Sidebar, Progress-Bar) */
  --z-header:    30;    /* Site-Header */
  --z-overlay:   40;    /* Modal-Overlay/Backdrop */
  --z-modal:     50;    /* Modal-Dialog */
  --z-toast:     60;    /* Toast-Notifications – immer im Vordergrund */
}