/* :root Styles automatisch generiert aus styles.json */

:root {

    font-size: 18px;
    font-family: var(--font-family);

    /* 1. Grundfarben */
    --font-family: SF Pro Display,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;
    --device-height: 100vh;
    --primary-color: #8CA58F;
    --secondary-color: #4D8454;
    --tertiary-color: #fff;
    --primary-border-color: #A2BEA6;
    --secondary-border-color: #597750;

    /* 2. Textfarben */
    --primary-text-color: #1d1d1f;
    --secondary-text-color: #1d1d1f;
    --tertiary-text-color: #fff;
    --placeholder-text-color: #6c7c8d;

    /* 3. Hintergrundfarben */
    --background-color: #f9f9f9;
    --blue-light: #ffffff;
    --gray-light: #b7d2bc;
    --background-overlay: #212124;
    --primary-icon-background: #333336;
    --secondary-icon-background: #e2e2e5;
    --glass-background: rgba(235, 238, 251, var(--opacity-low));
    --transparent-background: rgba(0, 0, 0, 0);

    /* 4. Arrow-Colors --> für die ">" + Hintergründe */
    --arrow-color-switch-dark: #86868b;
    --arrow-color-switch-light: #bebebe;
    --arrow-color-dropdown: #868685;
    --arrow-background-color-switch-dark: #e2e2e5;
    --arrow-background-color-switch-light: #f3f3f4;

    /* 5. Trennlinienfarben */
    --divider-color-light: #efefef;
    --divider-color-dark: #d2d2d7;

    /* 31. Background Gradient */
    --blue-gradient: linear-gradient(270deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    --blue-border-gradient: linear-gradient(270deg, var(--primary-border-color) 0%, var(--secondary-border-color) 100%);

    /* 2. Statusfarben */
    --error-color: #dc3545;
    --success-color: #28a745;
    --info-color: #17a2b8;
    --warning-color: #ffc107;

    /* 5. Schriftgrößen */
    --font-size: clamp(0.85rem, 0.75rem + 0.3vw ,1.5rem);
    --font-size-xs: clamp(0.64rem, 0.56rem + 0.225vw, 1.13rem);
    --font-size-sm: clamp(0.74rem, 0.66rem + 0.26vw, 1.31rem);
    --font-size-md: clamp(0.96rem, 0.84rem + 0.34vw, 1.69rem);
    --font-size-lg: clamp(1.28rem, 1.13rem + 0.45vw, 2.25rem);
    --font-size-xl: clamp(1.7rem, 1.5rem + 0.6vw, 3rem);
    --font-size-xxl: clamp(2.13rem, 1.88rem + 0.75vw, 3.75rem);

    /* 6. Schriftstärken */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    /* 7. Zeilenhöhe */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-loose: 1.75;

    /* 8. Letter Spacing */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.1em;

    /* 9. Abstände (Padding & Margin) */
    --spacing-xxs: 0.25rem;
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-side: 10%;
    --spacing-modal: 20%;
    --spacing-none: 0;
    --spacing-xxl: 18rem;

    /* 39. Backdrop-Blur (Filter) */
    --backdrop-blur: blur(4.5px);

    /* 32. Opacity-Werte */
    --opacity-low: 0.3;
    --modal-overlay-opacity: 0.4;
    --opacity-medium: 0.5;
    --opacity-high: 0.8;

    /* 24. Border-Radius */
    --border-radius-small: 8px;
    --border-radius-medium: 16px;
    --border-radius-large: 32px;
    --border-radius-full: 50%;

    /* 25. Z-Index Levels */
    --z-index-base: 1;
    --z-index-header: 10;
    --z-index-modal: 1000;
    --z-index-tooltip: 1100;
    --z-index-overlay: 999;

    /* 29. Icon-Größen */
    --icon-size-sm: 16px;
    --icon-size-md: 24px;
    --icon-size-lg: 32px;

    /* 33. Slider-Geschwindigkeit */
    --slider-speed: 0.5s;

    /* 19. Transition Geschwindigkeit */
    --transition-fast: 0.2s ease-in-out;
    --transition-normal: 0.4s ease-in-out;
    --transition-slow: 0.6s ease-in-out;

    /* 49. Animationen */
    --transition-all: all 0.3s ease;

    /* 50. Breakpoints für Responsive Design */
    --breakpoint-xs: 400px;
    --breakpoint-sm: 768px;
    --breakpoint-md: 1024px;
    --breakpoint-lg: 1440px;
    --breakpoint-xl: 1840px;

}