/* Color Group Context Mapping - Bereinigte Fassung */

/* Basis-Variablen */
:root {
    --color-background: var(--color-base-bg);
    --color-text: var(--color-base-text);
    --color-border: var(--color-base-border);
    --color-input-bg: #ffffff;
    --color-input-text: var(--color-base-text);
    --color-border-light: oklch(from var(--color-background) calc(l + 0.4) c h);
    --color-border-dark: oklch(from var(--color-background) calc(l - 0.4) c h);
    --color-background-opaque: oklch(from var(--color-background) l c h / 0.4);
    --color-zebra-light: oklch(from var(--color-background) calc(l + 0.05) c h);
    --color-zebra-dark: oklch(from var(--color-background) calc(l - 0.05) c h);
}

/* KONTEXT-KLASSEN (.color-*)
   Setzen Variablen für Texte, Rahmen und Zebra-Streifen innerhalb dieses Bereichs.
   Sie malen KEINEN Hintergrund selbst (das macht .bg-*).
*/

.color-primary {
    --color-context: var(--color-primary);
    --color-text: oklch(from var(--color-context) clamp(0.1, calc((0.5 - l) * 100), 0.9) 0 h);
    --color-border-light: oklch(from var(--color-context) calc(l + 0.4) c h);
    --color-border-dark: oklch(from var(--color-context) calc(l - 0.4) c h);
    --color-input-bg: oklch(from var(--color-context) clamp(0, calc(l + clamp(-0.1, calc((l - 0.5) * 100), 0.1)), 1) c h);
    --color-input-text: oklch(from var(--color-input-bg) clamp(0.1, calc((0.5 - l) * 100), 0.9) 0 h);
    --color-zebra-light: oklch(from var(--color-context) calc(l + 0.05) c h);
    --color-zebra-dark: oklch(from var(--color-context) calc(l - 0.05) c h);
}

.color-primary-shade-1 {
    --color-context: var(--color-primary-shade-1);
    --color-text: oklch(from var(--color-context) clamp(0.1, calc((0.5 - l) * 100), 0.9) 0 h);
    --color-border-light: oklch(from var(--color-context) calc(l + 0.4) c h);
    --color-border-dark: oklch(from var(--color-context) calc(l - 0.4) c h);
    --color-input-bg: oklch(from var(--color-context) clamp(0, calc(l + clamp(-0.1, calc((l - 0.5) * 100), 0.1)), 1) c h);
    --color-input-text: oklch(from var(--color-input-bg) clamp(0.1, calc((0.5 - l) * 100), 0.9) 0 h);
    --color-zebra-light: oklch(from var(--color-context) calc(l + 0.05) c h);
    --color-zebra-dark: oklch(from var(--color-context) calc(l - 0.05) c h);
}

.color-primary-shade-2 {
    --color-context: var(--color-primary-shade-2);
    --color-text: oklch(from var(--color-context) clamp(0.1, calc((0.5 - l) * 100), 0.9) 0 h);
    --color-border-light: oklch(from var(--color-context) calc(l + 0.4) c h);
    --color-border-dark: oklch(from var(--color-context) calc(l - 0.4) c h);
    --color-input-bg: oklch(from var(--color-context) clamp(0, calc(l + clamp(-0.1, calc((l - 0.5) * 100), 0.1)), 1) c h);
    --color-input-text: oklch(from var(--color-input-bg) clamp(0.1, calc((0.5 - l) * 100), 0.9) 0 h);
    --color-zebra-light: oklch(from var(--color-context) calc(l + 0.05) c h);
    --color-zebra-dark: oklch(from var(--color-context) calc(l - 0.05) c h);
}

.color-secondary {
    --color-context: var(--color-secondary);
    --color-text: oklch(from var(--color-context) clamp(0.1, calc((0.5 - l) * 100), 0.9) 0 h);
    --color-border-light: oklch(from var(--color-context) calc(l + 0.4) c h);
    --color-border-dark: oklch(from var(--color-context) calc(l - 0.4) c h);
    --color-input-bg: oklch(from var(--color-context) clamp(0, calc(l + clamp(-0.1, calc((l - 0.5) * 100), 0.1)), 1) c h);
    --color-input-text: oklch(from var(--color-input-bg) clamp(0.1, calc((0.5 - l) * 100), 0.9) 0 h);
    --color-zebra-light: oklch(from var(--color-context) calc(l + 0.05) c h);
    --color-zebra-dark: oklch(from var(--color-context) calc(l - 0.05) c h);
}

.color-secondary-shade-1 {
    --color-context: var(--color-secondary-shade-1);
    --color-text: oklch(from var(--color-context) clamp(0.1, calc((0.5 - l) * 100), 0.9) 0 h);
    --color-border-light: oklch(from var(--color-context) calc(l + 0.4) c h);
    --color-border-dark: oklch(from var(--color-context) calc(l - 0.4) c h);
    --color-input-bg: oklch(from var(--color-context) clamp(0, calc(l + clamp(-0.1, calc((l - 0.5) * 100), 0.1)), 1) c h);
    --color-input-text: oklch(from var(--color-input-bg) clamp(0.1, calc((0.5 - l) * 100), 0.9) 0 h);
    --color-zebra-light: oklch(from var(--color-context) calc(l + 0.05) c h);
    --color-zebra-dark: oklch(from var(--color-context) calc(l - 0.05) c h);
}

.color-secondary-shade-2 {
    --color-context: var(--color-secondary-shade-2);
    --color-text: oklch(from var(--color-context) clamp(0.1, calc((0.5 - l) * 100), 0.9) 0 h);
    --color-border-light: oklch(from var(--color-context) calc(l + 0.4) c h);
    --color-border-dark: oklch(from var(--color-context) calc(l - 0.4) c h);
    --color-input-bg: oklch(from var(--color-context) clamp(0, calc(l + clamp(-0.1, calc((l - 0.5) * 100), 0.1)), 1) c h);
    --color-input-text: oklch(from var(--color-input-bg) clamp(0.1, calc((0.5 - l) * 100), 0.9) 0 h);
    --color-zebra-light: oklch(from var(--color-context) calc(l + 0.05) c h);
    --color-zebra-dark: oklch(from var(--color-context) calc(l - 0.05) c h);
}

.color-contrast {
    --color-context: var(--color-contrast);
    --color-text: oklch(from var(--color-context) clamp(0.1, calc((0.5 - l) * 100), 0.9) 0 h);
    --color-border-light: oklch(from var(--color-context) calc(l + 0.4) c h);
    --color-border-dark: oklch(from var(--color-context) calc(l - 0.4) c h);
    --color-input-bg: oklch(from var(--color-context) clamp(0, calc(l + clamp(-0.1, calc((l - 0.5) * 100), 0.1)), 1) c h);
    --color-input-text: oklch(from var(--color-input-bg) clamp(0.1, calc((0.5 - l) * 100), 0.9) 0 h);
    --color-zebra-light: oklch(from var(--color-context) calc(l + 0.05) c h);
    --color-zebra-dark: oklch(from var(--color-context) calc(l - 0.05) c h);
}

.color-contrast-shade-1 {
    --color-context: var(--color-contrast-shade-1);
    --color-text: oklch(from var(--color-context) clamp(0.1, calc((0.5 - l) * 100), 0.9) 0 h);
    --color-border-light: oklch(from var(--color-context) calc(l + 0.4) c h);
    --color-border-dark: oklch(from var(--color-context) calc(l - 0.4) c h);
    --color-input-bg: oklch(from var(--color-context) clamp(0, calc(l + clamp(-0.1, calc((l - 0.5) * 100), 0.1)), 1) c h);
    --color-input-text: oklch(from var(--color-input-bg) clamp(0.1, calc((0.5 - l) * 100), 0.9) 0 h);
    --color-zebra-light: oklch(from var(--color-context) calc(l + 0.05) c h);
    --color-zebra-dark: oklch(from var(--color-context) calc(l - 0.05) c h);
}

.color-contrast-shade-2 {
    --color-context: var(--color-contrast-shade-2);
    --color-text: oklch(from var(--color-context) clamp(0.1, calc((0.5 - l) * 100), 0.9) 0 h);
    --color-border-light: oklch(from var(--color-context) calc(l + 0.4) c h);
    --color-border-dark: oklch(from var(--color-context) calc(l - 0.4) c h);
    --color-input-bg: oklch(from var(--color-context) clamp(0, calc(l + clamp(-0.1, calc((l - 0.5) * 100), 0.1)), 1) c h);
    --color-input-text: oklch(from var(--color-input-bg) clamp(0.1, calc((0.5 - l) * 100), 0.9) 0 h);
    --color-zebra-light: oklch(from var(--color-context) calc(l + 0.05) c h);
    --color-zebra-dark: oklch(from var(--color-context) calc(l - 0.05) c h);
}

/* Status-Kontexte */
.color-success { --color-context: var(--color-success); --color-text: oklch(from var(--color-context) clamp(0.1, calc((0.5 - l) * 100), 0.9) 0 h); }
.color-warning { --color-context: var(--color-warning); --color-text: oklch(from var(--color-context) clamp(0.1, calc((0.5 - l) * 100), 0.9) 0 h); }
.color-error   { --color-context: var(--color-error);   --color-text: oklch(from var(--color-context) clamp(0.1, calc((0.5 - l) * 100), 0.9) 0 h); }
.color-info    { --color-context: var(--color-info);    --color-text: oklch(from var(--color-context) clamp(0.1, calc((0.5 - l) * 100), 0.9) 0 h); }


/* HINTERGRUND-ANWENDUNGS-KLASSEN (.bg-*)
   Werden am Container-Wrapper genutzt, um die Fläche zu färben.
   Nutzen !important, um Vererbung von übergeordneten Containern zu überschreiben.
*/

.bg-transparent { background-color: transparent !important; }

/* Primary Backgrounds */
.bg-primary { background-color: var(--color-primary) !important; }
.bg-primary-opaque-30 { background-color: oklch(from var(--color-primary) l c h / 0.3) !important; }
.bg-primary-opaque-60 { background-color: oklch(from var(--color-primary) l c h / 0.6) !important; }

.bg-primary-shade-1 { background-color: var(--color-primary-shade-1) !important; }
.bg-primary-shade-1-opaque-30 { background-color: oklch(from var(--color-primary-shade-1) l c h / 0.3) !important; }
.bg-primary-shade-1-opaque-60 { background-color: oklch(from var(--color-primary-shade-1) l c h / 0.6) !important; }

.bg-primary-shade-2 { background-color: var(--color-primary-shade-2) !important; }
.bg-primary-shade-2-opaque-30 { background-color: oklch(from var(--color-primary-shade-2) l c h / 0.3) !important; }
.bg-primary-shade-2-opaque-60 { background-color: oklch(from var(--color-primary-shade-2) l c h / 0.6) !important; }

/* Secondary Backgrounds */
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-secondary-opaque-30 { background-color: oklch(from var(--color-secondary) l c h / 0.3) !important; }
.bg-secondary-opaque-60 { background-color: oklch(from var(--color-secondary) l c h / 0.6) !important; }

.bg-secondary-shade-1 { background-color: var(--color-secondary-shade-1) !important; }
.bg-secondary-shade-1-opaque-30 { background-color: oklch(from var(--color-secondary-shade-1) l c h / 0.3) !important; }
.bg-secondary-shade-1-opaque-60 { background-color: oklch(from var(--color-secondary-shade-1) l c h / 0.6) !important; }

.bg-secondary-shade-2 { background-color: var(--color-secondary-shade-2) !important; }
.bg-secondary-shade-2-opaque-30 { background-color: oklch(from var(--color-secondary-shade-2) l c h / 0.3) !important; }
.bg-secondary-shade-2-opaque-60 { background-color: oklch(from var(--color-secondary-shade-2) l c h / 0.6) !important; }

/* Contrast Backgrounds */
.bg-contrast { background-color: var(--color-contrast) !important; }
.bg-contrast-opaque-30 { background-color: oklch(from var(--color-contrast) l c h / 0.3) !important; }
.bg-contrast-opaque-60 { background-color: oklch(from var(--color-contrast) l c h / 0.6) !important; }

.bg-contrast-shade-1 { background-color: var(--color-contrast-shade-1) !important; }
.bg-contrast-shade-1-opaque-30 { background-color: oklch(from var(--color-contrast-shade-1) l c h / 0.3) !important; }
.bg-contrast-shade-1-opaque-60 { background-color: oklch(from var(--color-contrast-shade-1) l c h / 0.6) !important; }

.bg-contrast-shade-2 { background-color: var(--color-contrast-shade-2) !important; }
.bg-contrast-shade-2-opaque-30 { background-color: oklch(from var(--color-contrast-shade-2) l c h / 0.3) !important; }
.bg-contrast-shade-2-opaque-60 { background-color: oklch(from var(--color-contrast-shade-2) l c h / 0.6) !important; }