/* Design-Tokens: zentrale CSS-Variablen für Farben, Radien, Schatten, Abstände.
   Muss vor allen anderen CSS-Dateien geladen werden. Andere Dateien nutzen diese
   Variablen schrittweise nach; bis dahin bleiben hartcodierte Werte dort unverändert. */

:root {
    /* Marken-/Statusfarben */
    --color-primary: #0d6efd;
    --color-primary-hover: #0b5ed7;
    --color-secondary: #6c757d;
    --color-secondary-hover: #5a6268;
    --color-success: #22a559;
    --color-danger: #dc3545;
    --color-info: #17a2b8;
    --color-warning: #b45309;

    /* Flächen & Text */
    --color-bg: #f8f9fb;
    --color-surface: #fff;
    --color-surface-muted: #f2f2f2;
    --color-surface-subtle: #f8f9fa;
    --color-text: #333;
    --color-text-muted: #6c757d;
    --color-text-strong: #343a40;
    --color-text-soft: #495057;
    --color-border: #e9ecef;

    /* Radien */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;

    /* Schatten */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.08), 0 16px 40px rgba(0, 0, 0, 0.10);

    /* Abstände */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;
}