/* ==========================================================================
   CSS-Variablen – zentrale Design-Tokens für das gesamte Plugin
   Hier ändern = überall geändert
   ========================================================================== */

:root {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;

    /* ===== FARBEN ===== */
    --color-primary:       hsl(211, 100%, 50%);
    --color-primary-hover: hsl(211, 100%, 42%);
    --color-primary-light: hsl(211, 100%, 95%);
    --color-text-inverse:  hsl(0, 0%, 100%);
    --color-danger:        hsl(4, 100%, 60%);
    --color-danger-hover:  hsl(0, 100%, 40%);

    /* Hintergrundfarben */
    --color-bg:       hsl(0, 0%, 100%);
    --color-bg-light: hsl(0, 0%, 98%);

    /* Text-Farben */
    --color-text:           hsl(0, 0%, 0%);
    --color-text-secondary: hsl(0, 0%, 40%);
    --color-text-muted:     hsl(0, 0%, 60%);

    /* Border & Divider */
    --color-border:       hsl(0, 0%, 87%);
    --color-border-light: hsl(0, 0%, 88%);

    /* Hover & States */
    --color-hover-bg: hsl(0, 0%, 88%);

    /* ===== TYPOGRAFIE ===== */
    --font-size-base:    1rem;
    --font-size-large:   1.25rem;
    --font-size-title:   1.5rem;
    --font-size-small:   1.0625rem;
    --font-size-smaller: 0.9rem;
    --font-size-total:   1.75rem;

    /* ===== ABSTÄNDE ===== */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* ===== BORDER RADIUS ===== */
    --radius-sm:   0.25rem;
    --radius-md:   0.5rem;
    --radius-lg:   0.75rem;
    --radius-full: 50%;

    /* ===== SCHATTEN ===== */
    --shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md:          0 4px 8px rgba(0, 0, 0, 0.2);
    --shadow-card:        0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-card-hover:  0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-selected:    0 0 0 2px var(--color-primary), 0 4px 16px hsla(211, 100%, 50%, 0.15);

    /* ===== TRANSITIONS ===== */
    --transition-fast:   0.2s ease;
    --transition-normal: 0.3s ease;

    /* ===== GRÖSSEN ===== */
    --button-height:     2.25rem;
    --max-content-width: 81.25rem;
}