@casoon/dragonfly
Version:
Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.
1,041 lines (955 loc) • 50.1 kB
CSS
/**
* Farbsystem
*
* Diese Datei definiert die komplette Farbpalette des Designsystems mit
* modernen OKLCH-Farbwerten für optimale Farbwiedergabe und -konsistenz.
*
* Das Farbsystem besteht aus:
* - Hauptfarbpaletten (Blau, Grün, Rot, etc.) mit jeweils 10 Abstufungen
* - Neutrale Farbpaletten (Grau, Warm-Grau) für UI-Elemente
* - Utility-Klassen für Text- und Hintergrundfarben
*
* Alle Farben sind im OKLCH-Farbraum definiert, der folgende Vorteile bietet:
* - Perceptive Gleichmäßigkeit der Farbabstufungen
* - Erweiterten Farbraum verglichen mit RGB/sRGB
* - Bessere Barrierefreiheit durch vorhersagbare Kontraste
*
* @hinweis Diese Datei wird vor color-mix.css geladen und stellt die Basis-Farbwerte bereit
* @technisch Verwendet den modernen OKLCH-Farbraum für optimale Farbwiedergabe
*/
@layer colors {
:root {
/* Blautöne */
--color-blue-50: oklch(95% 0.05 250deg);
--color-blue-100: oklch(90% 0.1 250deg);
--color-blue-200: oklch(85% 0.15 250deg);
--color-blue-300: oklch(80% 0.2 250deg);
--color-blue-400: oklch(75% 0.25 250deg);
--color-blue-500: oklch(70% 0.3 250deg);
--color-blue-600: oklch(65% 0.35 250deg);
--color-blue-700: oklch(60% 0.4 250deg);
--color-blue-800: oklch(55% 0.45 250deg);
--color-blue-900: oklch(50% 0.5 250deg);
/* Hellblautöne */
--color-sky-50: oklch(95% 0.05 230deg);
--color-sky-100: oklch(90% 0.1 230deg);
--color-sky-200: oklch(85% 0.15 230deg);
--color-sky-300: oklch(80% 0.2 230deg);
--color-sky-400: oklch(75% 0.25 230deg);
--color-sky-500: oklch(70% 0.3 230deg);
--color-sky-600: oklch(65% 0.35 230deg);
--color-sky-700: oklch(60% 0.4 230deg);
--color-sky-800: oklch(55% 0.45 230deg);
--color-sky-900: oklch(50% 0.5 230deg);
/* Türkistöne */
--color-cyan-50: oklch(95% 0.05 200deg);
--color-cyan-100: oklch(90% 0.1 200deg);
--color-cyan-200: oklch(85% 0.15 200deg);
--color-cyan-300: oklch(80% 0.2 200deg);
--color-cyan-400: oklch(75% 0.25 200deg);
--color-cyan-500: oklch(70% 0.3 200deg);
--color-cyan-600: oklch(65% 0.35 200deg);
--color-cyan-700: oklch(60% 0.4 200deg);
--color-cyan-800: oklch(55% 0.45 200deg);
--color-cyan-900: oklch(50% 0.5 200deg);
/* Minttöne */
--color-mint-50: oklch(95% 0.05 170deg);
--color-mint-100: oklch(90% 0.1 170deg);
--color-mint-200: oklch(85% 0.15 170deg);
--color-mint-300: oklch(80% 0.2 170deg);
--color-mint-400: oklch(75% 0.25 170deg);
--color-mint-500: oklch(70% 0.3 170deg);
--color-mint-600: oklch(65% 0.35 170deg);
--color-mint-700: oklch(60% 0.4 170deg);
--color-mint-800: oklch(55% 0.45 170deg);
--color-mint-900: oklch(50% 0.5 170deg);
/* Grüntöne */
--color-green-50: oklch(95% 0.05 150deg);
--color-green-100: oklch(90% 0.1 150deg);
--color-green-200: oklch(85% 0.15 150deg);
--color-green-300: oklch(80% 0.2 150deg);
--color-green-400: oklch(75% 0.25 150deg);
--color-green-500: oklch(70% 0.3 150deg);
--color-green-600: oklch(65% 0.35 150deg);
--color-green-700: oklch(60% 0.4 150deg);
--color-green-800: oklch(55% 0.45 150deg);
--color-green-900: oklch(50% 0.5 150deg);
/* Limettöne */
--color-lime-50: oklch(95% 0.05 120deg);
--color-lime-100: oklch(90% 0.1 120deg);
--color-lime-200: oklch(85% 0.15 120deg);
--color-lime-300: oklch(80% 0.2 120deg);
--color-lime-400: oklch(75% 0.25 120deg);
--color-lime-500: oklch(70% 0.3 120deg);
--color-lime-600: oklch(65% 0.35 120deg);
--color-lime-700: oklch(60% 0.4 120deg);
--color-lime-800: oklch(55% 0.45 120deg);
--color-lime-900: oklch(50% 0.5 120deg);
/* Gelbtöne */
--color-yellow-50: oklch(95% 0.1 80deg);
--color-yellow-100: oklch(90% 0.15 80deg);
--color-yellow-200: oklch(85% 0.2 80deg);
--color-yellow-300: oklch(80% 0.25 80deg);
--color-yellow-400: oklch(75% 0.3 80deg);
--color-yellow-500: oklch(70% 0.35 80deg);
--color-yellow-600: oklch(65% 0.4 80deg);
--color-yellow-700: oklch(60% 0.45 80deg);
--color-yellow-800: oklch(55% 0.5 80deg);
--color-yellow-900: oklch(50% 0.55 80deg);
/* Goldtöne */
--color-gold-50: oklch(95% 0.1 65deg);
--color-gold-100: oklch(90% 0.15 65deg);
--color-gold-200: oklch(85% 0.2 65deg);
--color-gold-300: oklch(80% 0.25 65deg);
--color-gold-400: oklch(75% 0.3 65deg);
--color-gold-500: oklch(70% 0.35 65deg);
--color-gold-600: oklch(65% 0.4 65deg);
--color-gold-700: oklch(60% 0.45 65deg);
--color-gold-800: oklch(55% 0.5 65deg);
--color-gold-900: oklch(50% 0.55 65deg);
/* Orangetöne */
--color-orange-50: oklch(95% 0.1 50deg);
--color-orange-100: oklch(90% 0.15 50deg);
--color-orange-200: oklch(85% 0.2 50deg);
--color-orange-300: oklch(80% 0.25 50deg);
--color-orange-400: oklch(75% 0.3 50deg);
--color-orange-500: oklch(70% 0.35 50deg);
--color-orange-600: oklch(65% 0.4 50deg);
--color-orange-700: oklch(60% 0.45 50deg);
--color-orange-800: oklch(55% 0.5 50deg);
--color-orange-900: oklch(50% 0.55 50deg);
/* Koralltöne */
--color-coral-50: oklch(95% 0.1 40deg);
--color-coral-100: oklch(90% 0.15 40deg);
--color-coral-200: oklch(85% 0.2 40deg);
--color-coral-300: oklch(80% 0.25 40deg);
--color-coral-400: oklch(75% 0.3 40deg);
--color-coral-500: oklch(70% 0.35 40deg);
--color-coral-600: oklch(65% 0.4 40deg);
--color-coral-700: oklch(60% 0.45 40deg);
--color-coral-800: oklch(55% 0.5 40deg);
--color-coral-900: oklch(50% 0.55 40deg);
/* Rottöne */
--color-red-50: oklch(95% 0.1 30deg);
--color-red-100: oklch(90% 0.15 30deg);
--color-red-200: oklch(85% 0.2 30deg);
--color-red-300: oklch(80% 0.25 30deg);
--color-red-400: oklch(75% 0.3 30deg);
--color-red-500: oklch(70% 0.35 30deg);
--color-red-600: oklch(65% 0.4 30deg);
--color-red-700: oklch(60% 0.45 30deg);
--color-red-800: oklch(55% 0.5 30deg);
--color-red-900: oklch(50% 0.55 30deg);
/* Pinktöne */
--color-pink-50: oklch(95% 0.1 0deg);
--color-pink-100: oklch(90% 0.15 0deg);
--color-pink-200: oklch(85% 0.2 0deg);
--color-pink-300: oklch(80% 0.25 0deg);
--color-pink-400: oklch(75% 0.3 0deg);
--color-pink-500: oklch(70% 0.35 0deg);
--color-pink-600: oklch(65% 0.4 0deg);
--color-pink-700: oklch(60% 0.45 0deg);
--color-pink-800: oklch(55% 0.5 0deg);
--color-pink-900: oklch(50% 0.55 0deg);
/* Rosatöne */
--color-rose-50: oklch(95% 0.1 10deg);
--color-rose-100: oklch(90% 0.15 10deg);
--color-rose-200: oklch(85% 0.2 10deg);
--color-rose-300: oklch(80% 0.25 10deg);
--color-rose-400: oklch(75% 0.3 10deg);
--color-rose-500: oklch(70% 0.35 10deg);
--color-rose-600: oklch(65% 0.4 10deg);
--color-rose-700: oklch(60% 0.45 10deg);
--color-rose-800: oklch(55% 0.5 10deg);
--color-rose-900: oklch(50% 0.55 10deg);
/* Violetttöne */
--color-purple-50: oklch(95% 0.05 350deg);
--color-purple-100: oklch(90% 0.1 350deg);
--color-purple-200: oklch(85% 0.15 350deg);
--color-purple-300: oklch(80% 0.2 350deg);
--color-purple-400: oklch(75% 0.25 350deg);
--color-purple-500: oklch(70% 0.3 350deg);
--color-purple-600: oklch(65% 0.35 350deg);
--color-purple-700: oklch(60% 0.4 350deg);
--color-purple-800: oklch(55% 0.45 350deg);
--color-purple-900: oklch(50% 0.5 350deg);
/* Indigotöne */
--color-indigo-50: oklch(95% 0.05 300deg);
--color-indigo-100: oklch(90% 0.1 300deg);
--color-indigo-200: oklch(85% 0.15 300deg);
--color-indigo-300: oklch(80% 0.2 300deg);
--color-indigo-400: oklch(75% 0.25 300deg);
--color-indigo-500: oklch(70% 0.3 300deg);
--color-indigo-600: oklch(65% 0.35 300deg);
--color-indigo-700: oklch(60% 0.4 300deg);
--color-indigo-800: oklch(55% 0.45 300deg);
--color-indigo-900: oklch(50% 0.5 300deg);
/* Grautöne */
--color-gray-50: oklch(98% 0.02 250deg);
--color-gray-100: oklch(95% 0.02 250deg);
--color-gray-200: oklch(90% 0.02 250deg);
--color-gray-300: oklch(85% 0.02 250deg);
--color-gray-400: oklch(80% 0.02 250deg);
--color-gray-500: oklch(75% 0.02 250deg);
--color-gray-600: oklch(70% 0.02 250deg);
--color-gray-700: oklch(65% 0.02 250deg);
--color-gray-800: oklch(60% 0.02 250deg);
--color-gray-900: oklch(55% 0.02 250deg);
/* System-Grautöne (mit Hue-Berechnung) */
--color-gray-hue: 262;
--color-system-gray-100: oklch(98.7% 0.003 var(--color-gray-hue));
--color-system-gray-200: oklch(97.4% 0.004 var(--color-gray-hue));
--color-system-gray-300: oklch(94.2% 0.006 var(--color-gray-hue));
--color-system-gray-400: oklch(89% 0.01 var(--color-gray-hue));
--color-system-gray-500: oklch(81% 0.014 var(--color-gray-hue));
--color-system-gray-600: oklch(68% 0.018 var(--color-gray-hue));
--color-system-gray-700: oklch(54% 0.02 var(--color-gray-hue));
--color-system-gray-800: oklch(36% 0.015 var(--color-gray-hue));
--color-system-gray-900: oklch(22% 0.01 var(--color-gray-hue));
/* Warme Grautöne */
--color-warm-gray-50: oklch(98% 0.02 30deg);
--color-warm-gray-100: oklch(95% 0.02 30deg);
--color-warm-gray-200: oklch(90% 0.02 30deg);
--color-warm-gray-300: oklch(85% 0.02 30deg);
--color-warm-gray-400: oklch(80% 0.02 30deg);
--color-warm-gray-500: oklch(75% 0.02 30deg);
--color-warm-gray-600: oklch(70% 0.02 30deg);
--color-warm-gray-700: oklch(65% 0.02 30deg);
--color-warm-gray-800: oklch(60% 0.02 30deg);
--color-warm-gray-900: oklch(55% 0.02 30deg);
/* Kalte Grautöne */
--color-cool-gray-50: oklch(98% 0.02 270deg);
--color-cool-gray-100: oklch(95% 0.02 270deg);
--color-cool-gray-200: oklch(90% 0.02 270deg);
--color-cool-gray-300: oklch(85% 0.02 270deg);
--color-cool-gray-400: oklch(80% 0.02 270deg);
--color-cool-gray-500: oklch(75% 0.02 270deg);
--color-cool-gray-600: oklch(70% 0.02 270deg);
--color-cool-gray-700: oklch(65% 0.02 270deg);
--color-cool-gray-800: oklch(60% 0.02 270deg);
--color-cool-gray-900: oklch(55% 0.02 270deg);
/* Reines Weiß und Schwarz */
--color-white: oklch(100% 0 0deg);
--color-black: oklch(0 0 0deg);
/* Alias für häufig verwendete Farben */
--color-text: var(--color-gray-900);
--color-text-secondary: var(--color-gray-600);
--color-background: var(--color-gray-50);
--color-background-secondary: var(--color-gray-100);
--color-background-tertiary: var(--color-gray-200);
--color-border: var(--color-gray-300);
/* Azurtöne */
--color-azure-50: oklch(95% 0.05 240deg);
--color-azure-100: oklch(90% 0.1 240deg);
--color-azure-200: oklch(85% 0.15 240deg);
--color-azure-300: oklch(80% 0.2 240deg);
--color-azure-400: oklch(75% 0.25 240deg);
--color-azure-500: oklch(70% 0.3 240deg);
--color-azure-600: oklch(65% 0.35 240deg);
--color-azure-700: oklch(60% 0.4 240deg);
--color-azure-800: oklch(55% 0.45 240deg);
--color-azure-900: oklch(50% 0.5 240deg);
/* Tealtöne */
--color-teal-50: oklch(95% 0.05 190deg);
--color-teal-100: oklch(90% 0.1 190deg);
--color-teal-200: oklch(85% 0.15 190deg);
--color-teal-300: oklch(80% 0.2 190deg);
--color-teal-400: oklch(75% 0.25 190deg);
--color-teal-500: oklch(70% 0.3 190deg);
--color-teal-600: oklch(65% 0.35 190deg);
--color-teal-700: oklch(60% 0.4 190deg);
--color-teal-800: oklch(55% 0.45 190deg);
--color-teal-900: oklch(50% 0.5 190deg);
/* Smaragdtöne */
--color-emerald-50: oklch(95% 0.1 165deg);
--color-emerald-100: oklch(90% 0.15 165deg);
--color-emerald-200: oklch(85% 0.2 165deg);
--color-emerald-300: oklch(80% 0.25 165deg);
--color-emerald-400: oklch(75% 0.3 165deg);
--color-emerald-500: oklch(70% 0.35 165deg);
--color-emerald-600: oklch(65% 0.4 165deg);
--color-emerald-700: oklch(60% 0.45 165deg);
--color-emerald-800: oklch(55% 0.5 165deg);
--color-emerald-900: oklch(50% 0.55 165deg);
/* Olivtöne */
--color-olive-50: oklch(95% 0.05 110deg);
--color-olive-100: oklch(90% 0.1 110deg);
--color-olive-200: oklch(85% 0.15 110deg);
--color-olive-300: oklch(80% 0.2 110deg);
--color-olive-400: oklch(75% 0.25 110deg);
--color-olive-500: oklch(70% 0.3 110deg);
--color-olive-600: oklch(65% 0.35 110deg);
--color-olive-700: oklch(60% 0.4 110deg);
--color-olive-800: oklch(55% 0.45 110deg);
--color-olive-900: oklch(50% 0.5 110deg);
/* Bernstein */
--color-amber-50: oklch(95% 0.1 70deg);
--color-amber-100: oklch(90% 0.15 70deg);
--color-amber-200: oklch(85% 0.2 70deg);
--color-amber-300: oklch(80% 0.25 70deg);
--color-amber-400: oklch(75% 0.3 70deg);
--color-amber-500: oklch(70% 0.35 70deg);
--color-amber-600: oklch(65% 0.4 70deg);
--color-amber-700: oklch(60% 0.45 70deg);
--color-amber-800: oklch(55% 0.5 70deg);
--color-amber-900: oklch(50% 0.55 70deg);
/* Kupfertöne */
--color-copper-50: oklch(95% 0.1 45deg);
--color-copper-100: oklch(90% 0.15 45deg);
--color-copper-200: oklch(85% 0.2 45deg);
--color-copper-300: oklch(80% 0.25 45deg);
--color-copper-400: oklch(75% 0.3 45deg);
--color-copper-500: oklch(70% 0.35 45deg);
--color-copper-600: oklch(65% 0.4 45deg);
--color-copper-700: oklch(60% 0.45 45deg);
--color-copper-800: oklch(55% 0.5 45deg);
--color-copper-900: oklch(50% 0.55 45deg);
/* Kirschtöne */
--color-cherry-50: oklch(95% 0.1 20deg);
--color-cherry-100: oklch(90% 0.15 20deg);
--color-cherry-200: oklch(85% 0.2 20deg);
--color-cherry-300: oklch(80% 0.25 20deg);
--color-cherry-400: oklch(75% 0.3 20deg);
--color-cherry-500: oklch(70% 0.35 20deg);
--color-cherry-600: oklch(65% 0.4 20deg);
--color-cherry-700: oklch(60% 0.45 20deg);
--color-cherry-800: oklch(55% 0.5 20deg);
--color-cherry-900: oklch(50% 0.55 20deg);
/* Magentatöne */
--color-magenta-50: oklch(95% 0.1 340deg);
--color-magenta-100: oklch(90% 0.15 340deg);
--color-magenta-200: oklch(85% 0.2 340deg);
--color-magenta-300: oklch(80% 0.25 340deg);
--color-magenta-400: oklch(75% 0.3 340deg);
--color-magenta-500: oklch(70% 0.35 340deg);
--color-magenta-600: oklch(65% 0.4 340deg);
--color-magenta-700: oklch(60% 0.45 340deg);
--color-magenta-800: oklch(55% 0.5 340deg);
--color-magenta-900: oklch(50% 0.55 340deg);
/* Lavendeltöne */
--color-lavender-50: oklch(95% 0.05 320deg);
--color-lavender-100: oklch(90% 0.1 320deg);
--color-lavender-200: oklch(85% 0.15 320deg);
--color-lavender-300: oklch(80% 0.2 320deg);
--color-lavender-400: oklch(75% 0.25 320deg);
--color-lavender-500: oklch(70% 0.3 320deg);
--color-lavender-600: oklch(65% 0.35 320deg);
--color-lavender-700: oklch(60% 0.4 320deg);
--color-lavender-800: oklch(55% 0.45 320deg);
--color-lavender-900: oklch(50% 0.5 320deg);
/* Bronzetöne */
--color-bronze-50: oklch(95% 0.1 40deg);
--color-bronze-100: oklch(90% 0.15 40deg);
--color-bronze-200: oklch(85% 0.2 40deg);
--color-bronze-300: oklch(80% 0.25 40deg);
--color-bronze-400: oklch(75% 0.3 40deg);
--color-bronze-500: oklch(70% 0.35 40deg);
--color-bronze-600: oklch(65% 0.4 40deg);
--color-bronze-700: oklch(60% 0.45 40deg);
--color-bronze-800: oklch(55% 0.5 40deg);
--color-bronze-900: oklch(50% 0.55 40deg);
/* Perltöne */
--color-pearl-50: oklch(98% 0.01 0deg);
--color-pearl-100: oklch(95% 0.01 0deg);
--color-pearl-200: oklch(92% 0.01 0deg);
--color-pearl-300: oklch(89% 0.01 0deg);
--color-pearl-400: oklch(86% 0.01 0deg);
--color-pearl-500: oklch(83% 0.01 0deg);
--color-pearl-600: oklch(80% 0.01 0deg);
--color-pearl-700: oklch(77% 0.01 0deg);
--color-pearl-800: oklch(74% 0.01 0deg);
--color-pearl-900: oklch(71% 0.01 0deg);
/* Champagnertöne */
--color-champagne-50: oklch(98% 0.02 60deg);
--color-champagne-100: oklch(95% 0.02 60deg);
--color-champagne-200: oklch(92% 0.02 60deg);
--color-champagne-300: oklch(89% 0.02 60deg);
--color-champagne-400: oklch(86% 0.02 60deg);
--color-champagne-500: oklch(83% 0.02 60deg);
--color-champagne-600: oklch(80% 0.02 60deg);
--color-champagne-700: oklch(77% 0.02 60deg);
--color-champagne-800: oklch(74% 0.02 60deg);
--color-champagne-900: oklch(71% 0.02 60deg);
/* Tauptöne */
--color-taupe-50: oklch(95% 0.02 20deg);
--color-taupe-100: oklch(90% 0.02 20deg);
--color-taupe-200: oklch(85% 0.02 20deg);
--color-taupe-300: oklch(80% 0.02 20deg);
--color-taupe-400: oklch(75% 0.02 20deg);
--color-taupe-500: oklch(70% 0.02 20deg);
--color-taupe-600: oklch(65% 0.02 20deg);
--color-taupe-700: oklch(60% 0.02 20deg);
--color-taupe-800: oklch(55% 0.02 20deg);
--color-taupe-900: oklch(50% 0.02 20deg);
/* Beigetöne */
--color-beige-50: oklch(98% 0.02 80deg);
--color-beige-100: oklch(95% 0.02 80deg);
--color-beige-200: oklch(92% 0.02 80deg);
--color-beige-300: oklch(89% 0.02 80deg);
--color-beige-400: oklch(86% 0.02 80deg);
--color-beige-500: oklch(83% 0.02 80deg);
--color-beige-600: oklch(80% 0.02 80deg);
--color-beige-700: oklch(77% 0.02 80deg);
--color-beige-800: oklch(74% 0.02 80deg);
--color-beige-900: oklch(71% 0.02 80deg);
/* Khakitöne */
--color-khaki-50: oklch(95% 0.05 100deg);
--color-khaki-100: oklch(90% 0.05 100deg);
--color-khaki-200: oklch(85% 0.05 100deg);
--color-khaki-300: oklch(80% 0.05 100deg);
--color-khaki-400: oklch(75% 0.05 100deg);
--color-khaki-500: oklch(70% 0.05 100deg);
--color-khaki-600: oklch(65% 0.05 100deg);
--color-khaki-700: oklch(60% 0.05 100deg);
--color-khaki-800: oklch(55% 0.05 100deg);
--color-khaki-900: oklch(50% 0.05 100deg);
/* Terrakottatöne */
--color-terracotta-50: oklch(95% 0.1 25deg);
--color-terracotta-100: oklch(90% 0.15 25deg);
--color-terracotta-200: oklch(85% 0.2 25deg);
--color-terracotta-300: oklch(80% 0.25 25deg);
--color-terracotta-400: oklch(75% 0.3 25deg);
--color-terracotta-500: oklch(70% 0.35 25deg);
--color-terracotta-600: oklch(65% 0.4 25deg);
--color-terracotta-700: oklch(60% 0.45 25deg);
--color-terracotta-800: oklch(55% 0.5 25deg);
--color-terracotta-900: oklch(50% 0.55 25deg);
/* Burgundertöne */
--color-burgundy-50: oklch(95% 0.1 350deg);
--color-burgundy-100: oklch(90% 0.15 350deg);
--color-burgundy-200: oklch(85% 0.2 350deg);
--color-burgundy-300: oklch(80% 0.25 350deg);
--color-burgundy-400: oklch(75% 0.3 350deg);
--color-burgundy-500: oklch(70% 0.35 350deg);
--color-burgundy-600: oklch(65% 0.4 350deg);
--color-burgundy-700: oklch(60% 0.45 350deg);
--color-burgundy-800: oklch(55% 0.5 350deg);
--color-burgundy-900: oklch(50% 0.55 350deg);
/* Silbertöne */
--color-silver-50: oklch(98% 0.01 250deg);
--color-silver-100: oklch(95% 0.01 250deg);
--color-silver-200: oklch(92% 0.01 250deg);
--color-silver-300: oklch(89% 0.01 250deg);
--color-silver-400: oklch(86% 0.01 250deg);
--color-silver-500: oklch(83% 0.01 250deg);
--color-silver-600: oklch(80% 0.01 250deg);
--color-silver-700: oklch(77% 0.01 250deg);
--color-silver-800: oklch(74% 0.01 250deg);
--color-silver-900: oklch(71% 0.01 250deg);
/* Platinatöne */
--color-platinum-50: oklch(98% 0.01 270deg);
--color-platinum-100: oklch(95% 0.01 270deg);
--color-platinum-200: oklch(92% 0.01 270deg);
--color-platinum-300: oklch(89% 0.01 270deg);
--color-platinum-400: oklch(86% 0.01 270deg);
--color-platinum-500: oklch(83% 0.01 270deg);
--color-platinum-600: oklch(80% 0.01 270deg);
--color-platinum-700: oklch(77% 0.01 270deg);
--color-platinum-800: oklch(74% 0.01 270deg);
--color-platinum-900: oklch(71% 0.01 270deg);
/* Graphittöne */
--color-graphite-50: oklch(95% 0.02 280deg);
--color-graphite-100: oklch(90% 0.02 280deg);
--color-graphite-200: oklch(85% 0.02 280deg);
--color-graphite-300: oklch(80% 0.02 280deg);
--color-graphite-400: oklch(75% 0.02 280deg);
--color-graphite-500: oklch(70% 0.02 280deg);
--color-graphite-600: oklch(65% 0.02 280deg);
--color-graphite-700: oklch(60% 0.02 280deg);
--color-graphite-800: oklch(55% 0.02 280deg);
--color-graphite-900: oklch(50% 0.02 280deg);
/* Moostöne */
--color-moss-50: oklch(95% 0.05 140deg);
--color-moss-100: oklch(90% 0.05 140deg);
--color-moss-200: oklch(85% 0.05 140deg);
--color-moss-300: oklch(80% 0.05 140deg);
--color-moss-400: oklch(75% 0.05 140deg);
--color-moss-500: oklch(70% 0.05 140deg);
--color-moss-600: oklch(65% 0.05 140deg);
--color-moss-700: oklch(60% 0.05 140deg);
--color-moss-800: oklch(55% 0.05 140deg);
--color-moss-900: oklch(50% 0.05 140deg);
/* Jade */
--color-jade-50: oklch(95% 0.1 150deg);
--color-jade-100: oklch(90% 0.15 150deg);
--color-jade-200: oklch(85% 0.2 150deg);
--color-jade-300: oklch(80% 0.25 150deg);
--color-jade-400: oklch(75% 0.3 150deg);
--color-jade-500: oklch(70% 0.35 150deg);
--color-jade-600: oklch(65% 0.4 150deg);
--color-jade-700: oklch(60% 0.45 150deg);
--color-jade-800: oklch(55% 0.5 150deg);
--color-jade-900: oklch(50% 0.55 150deg);
/* Saphir */
--color-sapphire-50: oklch(95% 0.1 260deg);
--color-sapphire-100: oklch(90% 0.15 260deg);
--color-sapphire-200: oklch(85% 0.2 260deg);
--color-sapphire-300: oklch(80% 0.25 260deg);
--color-sapphire-400: oklch(75% 0.3 260deg);
--color-sapphire-500: oklch(70% 0.35 260deg);
--color-sapphire-600: oklch(65% 0.4 260deg);
--color-sapphire-700: oklch(60% 0.45 260deg);
--color-sapphire-800: oklch(55% 0.5 260deg);
--color-sapphire-900: oklch(50% 0.55 260deg);
/* Rubin */
--color-ruby-50: oklch(95% 0.1 0deg);
--color-ruby-100: oklch(90% 0.15 0deg);
--color-ruby-200: oklch(85% 0.2 0deg);
--color-ruby-300: oklch(80% 0.25 0deg);
--color-ruby-400: oklch(75% 0.3 0deg);
--color-ruby-500: oklch(70% 0.35 0deg);
--color-ruby-600: oklch(65% 0.4 0deg);
--color-ruby-700: oklch(60% 0.45 0deg);
--color-ruby-800: oklch(55% 0.5 0deg);
--color-ruby-900: oklch(50% 0.55 0deg);
/* Amethyst */
--color-amethyst-50: oklch(95% 0.1 310deg);
--color-amethyst-100: oklch(90% 0.15 310deg);
--color-amethyst-200: oklch(85% 0.2 310deg);
--color-amethyst-300: oklch(80% 0.25 310deg);
--color-amethyst-400: oklch(75% 0.3 310deg);
--color-amethyst-500: oklch(70% 0.35 310deg);
--color-amethyst-600: oklch(65% 0.4 310deg);
--color-amethyst-700: oklch(60% 0.45 310deg);
--color-amethyst-800: oklch(55% 0.5 310deg);
--color-amethyst-900: oklch(50% 0.55 310deg);
/* Topas */
--color-topaz-50: oklch(95% 0.1 65deg);
--color-topaz-100: oklch(90% 0.15 65deg);
--color-topaz-200: oklch(85% 0.2 65deg);
--color-topaz-300: oklch(80% 0.25 65deg);
--color-topaz-400: oklch(75% 0.3 65deg);
--color-topaz-500: oklch(70% 0.35 65deg);
--color-topaz-600: oklch(65% 0.4 65deg);
--color-topaz-700: oklch(60% 0.45 65deg);
--color-topaz-800: oklch(55% 0.5 65deg);
--color-topaz-900: oklch(50% 0.55 65deg);
/* Zitrin */
--color-citrine-50: oklch(95% 0.1 85deg);
--color-citrine-100: oklch(90% 0.15 85deg);
--color-citrine-200: oklch(85% 0.2 85deg);
--color-citrine-300: oklch(80% 0.25 85deg);
--color-citrine-400: oklch(75% 0.3 85deg);
--color-citrine-500: oklch(70% 0.35 85deg);
--color-citrine-600: oklch(65% 0.4 85deg);
--color-citrine-700: oklch(60% 0.45 85deg);
--color-citrine-800: oklch(55% 0.5 85deg);
--color-citrine-900: oklch(50% 0.55 85deg);
/* Peridot */
--color-peridot-50: oklch(95% 0.1 135deg);
--color-peridot-100: oklch(90% 0.15 135deg);
--color-peridot-200: oklch(85% 0.2 135deg);
--color-peridot-300: oklch(80% 0.25 135deg);
--color-peridot-400: oklch(75% 0.3 135deg);
--color-peridot-500: oklch(70% 0.35 135deg);
--color-peridot-600: oklch(65% 0.4 135deg);
--color-peridot-700: oklch(60% 0.45 135deg);
--color-peridot-800: oklch(55% 0.5 135deg);
--color-peridot-900: oklch(50% 0.55 135deg);
/* Opal */
--color-opal-50: oklch(98% 0.01 205deg);
--color-opal-100: oklch(95% 0.01 205deg);
--color-opal-200: oklch(92% 0.01 205deg);
--color-opal-300: oklch(89% 0.01 205deg);
--color-opal-400: oklch(86% 0.01 205deg);
--color-opal-500: oklch(83% 0.01 205deg);
--color-opal-600: oklch(80% 0.01 205deg);
--color-opal-700: oklch(77% 0.01 205deg);
--color-opal-800: oklch(74% 0.01 205deg);
--color-opal-900: oklch(71% 0.01 205deg);
/* Granat */
--color-garnet-50: oklch(95% 0.1 5deg);
--color-garnet-100: oklch(90% 0.15 5deg);
--color-garnet-200: oklch(85% 0.2 5deg);
--color-garnet-300: oklch(80% 0.25 5deg);
--color-garnet-400: oklch(75% 0.3 5deg);
--color-garnet-500: oklch(70% 0.35 5deg);
--color-garnet-600: oklch(65% 0.4 5deg);
--color-garnet-700: oklch(60% 0.45 5deg);
--color-garnet-800: oklch(55% 0.5 5deg);
--color-garnet-900: oklch(50% 0.55 5deg);
/* Onyx */
--color-onyx-50: oklch(95% 0.01 280deg);
--color-onyx-100: oklch(90% 0.01 280deg);
--color-onyx-200: oklch(85% 0.01 280deg);
--color-onyx-300: oklch(80% 0.01 280deg);
--color-onyx-400: oklch(75% 0.01 280deg);
--color-onyx-500: oklch(70% 0.01 280deg);
--color-onyx-600: oklch(65% 0.01 280deg);
--color-onyx-700: oklch(60% 0.01 280deg);
--color-onyx-800: oklch(55% 0.01 280deg);
--color-onyx-900: oklch(50% 0.01 280deg);
/* Malachit */
--color-malachite-50: oklch(95% 0.1 170deg);
--color-malachite-100: oklch(90% 0.15 170deg);
--color-malachite-200: oklch(85% 0.2 170deg);
--color-malachite-300: oklch(80% 0.25 170deg);
--color-malachite-400: oklch(75% 0.3 170deg);
--color-malachite-500: oklch(70% 0.35 170deg);
--color-malachite-600: oklch(65% 0.4 170deg);
--color-malachite-700: oklch(60% 0.45 170deg);
--color-malachite-800: oklch(55% 0.5 170deg);
--color-malachite-900: oklch(50% 0.55 170deg);
/* Lapislazuli */
--color-lapis-50: oklch(95% 0.1 270deg);
--color-lapis-100: oklch(90% 0.15 270deg);
--color-lapis-200: oklch(85% 0.2 270deg);
--color-lapis-300: oklch(80% 0.25 270deg);
--color-lapis-400: oklch(75% 0.3 270deg);
--color-lapis-500: oklch(70% 0.35 270deg);
--color-lapis-600: oklch(65% 0.4 270deg);
--color-lapis-700: oklch(60% 0.45 270deg);
--color-lapis-800: oklch(55% 0.5 270deg);
--color-lapis-900: oklch(50% 0.55 270deg);
/* Türkis */
--color-turquoise-50: oklch(95% 0.1 200deg);
--color-turquoise-100: oklch(90% 0.15 200deg);
--color-turquoise-200: oklch(85% 0.2 200deg);
--color-turquoise-300: oklch(80% 0.25 200deg);
--color-turquoise-400: oklch(75% 0.3 200deg);
--color-turquoise-500: oklch(70% 0.35 200deg);
--color-turquoise-600: oklch(65% 0.4 200deg);
--color-turquoise-700: oklch(60% 0.45 200deg);
--color-turquoise-800: oklch(55% 0.5 200deg);
--color-turquoise-900: oklch(50% 0.55 200deg);
/* Koralle */
--color-coral-50: oklch(95% 0.1 20deg);
--color-coral-100: oklch(90% 0.15 20deg);
--color-coral-200: oklch(85% 0.2 20deg);
--color-coral-300: oklch(80% 0.25 20deg);
--color-coral-400: oklch(75% 0.3 20deg);
--color-coral-500: oklch(70% 0.35 20deg);
--color-coral-600: oklch(65% 0.4 20deg);
--color-coral-700: oklch(60% 0.45 20deg);
--color-coral-800: oklch(55% 0.5 20deg);
--color-coral-900: oklch(50% 0.55 20deg);
/* Perlmutt */
--color-mother-of-pearl-50: oklch(98% 0.01 0deg);
--color-mother-of-pearl-100: oklch(95% 0.01 0deg);
--color-mother-of-pearl-200: oklch(92% 0.01 0deg);
--color-mother-of-pearl-300: oklch(89% 0.01 0deg);
--color-mother-of-pearl-400: oklch(86% 0.01 0deg);
--color-mother-of-pearl-500: oklch(83% 0.01 0deg);
--color-mother-of-pearl-600: oklch(80% 0.01 0deg);
--color-mother-of-pearl-700: oklch(77% 0.01 0deg);
--color-mother-of-pearl-800: oklch(74% 0.01 0deg);
--color-mother-of-pearl-900: oklch(71% 0.01 0deg);
/* Obsidian */
--color-obsidian-50: oklch(95% 0.01 290deg);
--color-obsidian-100: oklch(90% 0.01 290deg);
--color-obsidian-200: oklch(85% 0.01 290deg);
--color-obsidian-300: oklch(80% 0.01 290deg);
--color-obsidian-400: oklch(75% 0.01 290deg);
--color-obsidian-500: oklch(70% 0.01 290deg);
--color-obsidian-600: oklch(65% 0.01 290deg);
--color-obsidian-700: oklch(60% 0.01 290deg);
--color-obsidian-800: oklch(55% 0.01 290deg);
--color-obsidian-900: oklch(50% 0.01 290deg);
/* Jadeit */
--color-jadeite-50: oklch(95% 0.1 155deg);
--color-jadeite-100: oklch(90% 0.15 155deg);
--color-jadeite-200: oklch(85% 0.2 155deg);
--color-jadeite-300: oklch(80% 0.25 155deg);
--color-jadeite-400: oklch(75% 0.3 155deg);
--color-jadeite-500: oklch(70% 0.35 155deg);
--color-jadeite-600: oklch(65% 0.4 155deg);
--color-jadeite-700: oklch(60% 0.45 155deg);
--color-jadeite-800: oklch(55% 0.5 155deg);
--color-jadeite-900: oklch(50% 0.55 155deg);
/* Smaragd */
--color-emerald-50: oklch(95% 0.1 165deg);
--color-emerald-100: oklch(90% 0.15 165deg);
--color-emerald-200: oklch(85% 0.2 165deg);
--color-emerald-300: oklch(80% 0.25 165deg);
--color-emerald-400: oklch(75% 0.3 165deg);
--color-emerald-500: oklch(70% 0.35 165deg);
--color-emerald-600: oklch(65% 0.4 165deg);
--color-emerald-700: oklch(60% 0.45 165deg);
--color-emerald-800: oklch(55% 0.5 165deg);
--color-emerald-900: oklch(50% 0.55 165deg);
/* Aquamarin */
--color-aquamarine-50: oklch(95% 0.1 195deg);
--color-aquamarine-100: oklch(90% 0.15 195deg);
--color-aquamarine-200: oklch(85% 0.2 195deg);
--color-aquamarine-300: oklch(80% 0.25 195deg);
--color-aquamarine-400: oklch(75% 0.3 195deg);
--color-aquamarine-500: oklch(70% 0.35 195deg);
--color-aquamarine-600: oklch(65% 0.4 195deg);
--color-aquamarine-700: oklch(60% 0.45 195deg);
--color-aquamarine-800: oklch(55% 0.5 195deg);
--color-aquamarine-900: oklch(50% 0.55 195deg);
/* Topas */
--color-topaz-50: oklch(95% 0.1 65deg);
--color-topaz-100: oklch(90% 0.15 65deg);
--color-topaz-200: oklch(85% 0.2 65deg);
--color-topaz-300: oklch(80% 0.25 65deg);
--color-topaz-400: oklch(75% 0.3 65deg);
--color-topaz-500: oklch(70% 0.35 65deg);
--color-topaz-600: oklch(65% 0.4 65deg);
--color-topaz-700: oklch(60% 0.45 65deg);
--color-topaz-800: oklch(55% 0.5 65deg);
--color-topaz-900: oklch(50% 0.55 65deg);
/* Zitrin */
--color-citrine-50: oklch(95% 0.1 85deg);
--color-citrine-100: oklch(90% 0.15 85deg);
--color-citrine-200: oklch(85% 0.2 85deg);
--color-citrine-300: oklch(80% 0.25 85deg);
--color-citrine-400: oklch(75% 0.3 85deg);
--color-citrine-500: oklch(70% 0.35 85deg);
--color-citrine-600: oklch(65% 0.4 85deg);
--color-citrine-700: oklch(60% 0.45 85deg);
--color-citrine-800: oklch(55% 0.5 85deg);
--color-citrine-900: oklch(50% 0.55 85deg);
/* Peridot */
--color-peridot-50: oklch(95% 0.1 135deg);
--color-peridot-100: oklch(90% 0.15 135deg);
--color-peridot-200: oklch(85% 0.2 135deg);
--color-peridot-300: oklch(80% 0.25 135deg);
--color-peridot-400: oklch(75% 0.3 135deg);
--color-peridot-500: oklch(70% 0.35 135deg);
--color-peridot-600: oklch(65% 0.4 135deg);
--color-peridot-700: oklch(60% 0.45 135deg);
--color-peridot-800: oklch(55% 0.5 135deg);
--color-peridot-900: oklch(50% 0.55 135deg);
/* Opal */
--color-opal-50: oklch(98% 0.01 205deg);
--color-opal-100: oklch(95% 0.01 205deg);
--color-opal-200: oklch(92% 0.01 205deg);
--color-opal-300: oklch(89% 0.01 205deg);
--color-opal-400: oklch(86% 0.01 205deg);
--color-opal-500: oklch(83% 0.01 205deg);
--color-opal-600: oklch(80% 0.01 205deg);
--color-opal-700: oklch(77% 0.01 205deg);
--color-opal-800: oklch(74% 0.01 205deg);
--color-opal-900: oklch(71% 0.01 205deg);
/* Mondstein */
--color-moonstone-50: oklch(98% 0.01 220deg);
--color-moonstone-100: oklch(95% 0.01 220deg);
--color-moonstone-200: oklch(92% 0.01 220deg);
--color-moonstone-300: oklch(89% 0.01 220deg);
--color-moonstone-400: oklch(86% 0.01 220deg);
--color-moonstone-500: oklch(83% 0.01 220deg);
--color-moonstone-600: oklch(80% 0.01 220deg);
--color-moonstone-700: oklch(77% 0.01 220deg);
--color-moonstone-800: oklch(74% 0.01 220deg);
--color-moonstone-900: oklch(71% 0.01 220deg);
/* Labradorit */
--color-labradorite-50: oklch(95% 0.1 240deg);
--color-labradorite-100: oklch(90% 0.15 240deg);
--color-labradorite-200: oklch(85% 0.2 240deg);
--color-labradorite-300: oklch(80% 0.25 240deg);
--color-labradorite-400: oklch(75% 0.3 240deg);
--color-labradorite-500: oklch(70% 0.35 240deg);
--color-labradorite-600: oklch(65% 0.4 240deg);
--color-labradorite-700: oklch(60% 0.45 240deg);
--color-labradorite-800: oklch(55% 0.5 240deg);
--color-labradorite-900: oklch(50% 0.55 240deg);
/* Fluorit */
--color-fluorite-50: oklch(95% 0.1 280deg);
--color-fluorite-100: oklch(90% 0.15 280deg);
--color-fluorite-200: oklch(85% 0.2 280deg);
--color-fluorite-300: oklch(80% 0.25 280deg);
--color-fluorite-400: oklch(75% 0.3 280deg);
--color-fluorite-500: oklch(70% 0.35 280deg);
--color-fluorite-600: oklch(65% 0.4 280deg);
--color-fluorite-700: oklch(60% 0.45 280deg);
--color-fluorite-800: oklch(55% 0.5 280deg);
--color-fluorite-900: oklch(50% 0.55 280deg);
/* Pastelltöne */
--color-pastel-pink-50: oklch(95% 0.05 0deg);
--color-pastel-pink-100: oklch(90% 0.1 0deg);
--color-pastel-pink-200: oklch(85% 0.15 0deg);
--color-pastel-pink-300: oklch(80% 0.2 0deg);
--color-pastel-pink-400: oklch(75% 0.25 0deg);
--color-pastel-pink-500: oklch(70% 0.3 0deg);
--color-pastel-pink-600: oklch(65% 0.35 0deg);
--color-pastel-pink-700: oklch(60% 0.4 0deg);
--color-pastel-pink-800: oklch(55% 0.45 0deg);
--color-pastel-pink-900: oklch(50% 0.5 0deg);
--color-pastel-blue-50: oklch(95% 0.05 250deg);
--color-pastel-blue-100: oklch(90% 0.1 250deg);
--color-pastel-blue-200: oklch(85% 0.15 250deg);
--color-pastel-blue-300: oklch(80% 0.2 250deg);
--color-pastel-blue-400: oklch(75% 0.25 250deg);
--color-pastel-blue-500: oklch(70% 0.3 250deg);
--color-pastel-blue-600: oklch(65% 0.35 250deg);
--color-pastel-blue-700: oklch(60% 0.4 250deg);
--color-pastel-blue-800: oklch(55% 0.45 250deg);
--color-pastel-blue-900: oklch(50% 0.5 250deg);
--color-pastel-green-50: oklch(95% 0.05 150deg);
--color-pastel-green-100: oklch(90% 0.1 150deg);
--color-pastel-green-200: oklch(85% 0.15 150deg);
--color-pastel-green-300: oklch(80% 0.2 150deg);
--color-pastel-green-400: oklch(75% 0.25 150deg);
--color-pastel-green-500: oklch(70% 0.3 150deg);
--color-pastel-green-600: oklch(65% 0.35 150deg);
--color-pastel-green-700: oklch(60% 0.4 150deg);
--color-pastel-green-800: oklch(55% 0.45 150deg);
--color-pastel-green-900: oklch(50% 0.5 150deg);
--color-pastel-yellow-50: oklch(95% 0.05 80deg);
--color-pastel-yellow-100: oklch(90% 0.1 80deg);
--color-pastel-yellow-200: oklch(85% 0.15 80deg);
--color-pastel-yellow-300: oklch(80% 0.2 80deg);
--color-pastel-yellow-400: oklch(75% 0.25 80deg);
--color-pastel-yellow-500: oklch(70% 0.3 80deg);
--color-pastel-yellow-600: oklch(65% 0.35 80deg);
--color-pastel-yellow-700: oklch(60% 0.4 80deg);
--color-pastel-yellow-800: oklch(55% 0.45 80deg);
--color-pastel-yellow-900: oklch(50% 0.5 80deg);
--color-pastel-purple-50: oklch(95% 0.05 300deg);
--color-pastel-purple-100: oklch(90% 0.1 300deg);
--color-pastel-purple-200: oklch(85% 0.15 300deg);
--color-pastel-purple-300: oklch(80% 0.2 300deg);
--color-pastel-purple-400: oklch(75% 0.25 300deg);
--color-pastel-purple-500: oklch(70% 0.3 300deg);
--color-pastel-purple-600: oklch(65% 0.35 300deg);
--color-pastel-purple-700: oklch(60% 0.4 300deg);
--color-pastel-purple-800: oklch(55% 0.45 300deg);
--color-pastel-purple-900: oklch(50% 0.5 300deg);
/* Neontöne */
--color-neon-pink-50: oklch(95% 0.3 0deg);
--color-neon-pink-100: oklch(90% 0.35 0deg);
--color-neon-pink-200: oklch(85% 0.4 0deg);
--color-neon-pink-300: oklch(80% 0.45 0deg);
--color-neon-pink-400: oklch(75% 0.5 0deg);
--color-neon-pink-500: oklch(70% 0.55 0deg);
--color-neon-pink-600: oklch(65% 0.6 0deg);
--color-neon-pink-700: oklch(60% 0.65 0deg);
--color-neon-pink-800: oklch(55% 0.7 0deg);
--color-neon-pink-900: oklch(50% 0.75 0deg);
--color-neon-blue-50: oklch(95% 0.3 250deg);
--color-neon-blue-100: oklch(90% 0.35 250deg);
--color-neon-blue-200: oklch(85% 0.4 250deg);
--color-neon-blue-300: oklch(80% 0.45 250deg);
--color-neon-blue-400: oklch(75% 0.5 250deg);
--color-neon-blue-500: oklch(70% 0.55 250deg);
--color-neon-blue-600: oklch(65% 0.6 250deg);
--color-neon-blue-700: oklch(60% 0.65 250deg);
--color-neon-blue-800: oklch(55% 0.7 250deg);
--color-neon-blue-900: oklch(50% 0.75 250deg);
--color-neon-green-50: oklch(95% 0.3 150deg);
--color-neon-green-100: oklch(90% 0.35 150deg);
--color-neon-green-200: oklch(85% 0.4 150deg);
--color-neon-green-300: oklch(80% 0.45 150deg);
--color-neon-green-400: oklch(75% 0.5 150deg);
--color-neon-green-500: oklch(70% 0.55 150deg);
--color-neon-green-600: oklch(65% 0.6 150deg);
--color-neon-green-700: oklch(60% 0.65 150deg);
--color-neon-green-800: oklch(55% 0.7 150deg);
--color-neon-green-900: oklch(50% 0.75 150deg);
--color-neon-yellow-50: oklch(95% 0.3 80deg);
--color-neon-yellow-100: oklch(90% 0.35 80deg);
--color-neon-yellow-200: oklch(85% 0.4 80deg);
--color-neon-yellow-300: oklch(80% 0.45 80deg);
--color-neon-yellow-400: oklch(75% 0.5 80deg);
--color-neon-yellow-500: oklch(70% 0.55 80deg);
--color-neon-yellow-600: oklch(65% 0.6 80deg);
--color-neon-yellow-700: oklch(60% 0.65 80deg);
--color-neon-yellow-800: oklch(55% 0.7 80deg);
--color-neon-yellow-900: oklch(50% 0.75 80deg);
--color-neon-orange-50: oklch(95% 0.3 50deg);
--color-neon-orange-100: oklch(90% 0.35 50deg);
--color-neon-orange-200: oklch(85% 0.4 50deg);
--color-neon-orange-300: oklch(80% 0.45 50deg);
--color-neon-orange-400: oklch(75% 0.5 50deg);
--color-neon-orange-500: oklch(70% 0.55 50deg);
--color-neon-orange-600: oklch(65% 0.6 50deg);
--color-neon-orange-700: oklch(60% 0.65 50deg);
--color-neon-orange-800: oklch(55% 0.7 50deg);
--color-neon-orange-900: oklch(50% 0.75 50deg);
--color-neon-purple-50: oklch(95% 0.3 300deg);
--color-neon-purple-100: oklch(90% 0.35 300deg);
--color-neon-purple-200: oklch(85% 0.4 300deg);
--color-neon-purple-300: oklch(80% 0.45 300deg);
--color-neon-purple-400: oklch(75% 0.5 300deg);
--color-neon-purple-500: oklch(70% 0.55 300deg);
--color-neon-purple-600: oklch(65% 0.6 300deg);
--color-neon-purple-700: oklch(60% 0.65 300deg);
--color-neon-purple-800: oklch(55% 0.7 300deg);
--color-neon-purple-900: oklch(50% 0.75 300deg);
/* Moderne Farbfunktionen mit color-mix() */
/* Farbvarianten mit Alpha-Werten */
--blue-transparent-10: color-mix(in srgb, var(--color-blue-500) 10, transparent);
--blue-transparent-20: color-mix(in srgb, var(--color-blue-500) 20, transparent);
--blue-transparent-30: color-mix(in srgb, var(--color-blue-500) 30, transparent);
--blue-transparent-40: color-mix(in srgb, var(--color-blue-500) 40, transparent);
--blue-transparent-50: color-mix(in srgb, var(--color-blue-500) 50, transparent);
/* Farbvarianten mit Schwarz/Weiß für Schatten und Highlights */
--blue-tint-10: color-mix(in srgb, var(--color-blue-500) 90, var(--color-white));
--blue-tint-20: color-mix(in srgb, var(--color-blue-500) 80, var(--color-white));
--blue-tint-30: color-mix(in srgb, var(--color-blue-500) 70, var(--color-white));
--blue-shade-10: color-mix(in srgb, var(--color-blue-500) 90, var(--color-black));
--blue-shade-20: color-mix(in srgb, var(--color-blue-500) 80, var(--color-black));
--blue-shade-30: color-mix(in srgb, var(--color-blue-500) 70, var(--color-black));
/* Farbvarianten für Hover- und aktive Zustände */
--blue-hover: color-mix(in srgb, var(--color-blue-500) 90, var(--color-white));
--blue-active: color-mix(in srgb, var(--color-blue-500) 90, var(--color-black));
/* Kontrastierende Farben */
--blue-contrast-light: color-mix(in srgb, var(--color-blue-500) 10, var(--color-white));
--blue-contrast-dark: color-mix(in srgb, var(--color-blue-900) 90, var(--color-black));
/* Farbkombinationen für spezielle Effekte */
--primary-secondary-mix: color-mix(in lch, var(--color-blue-500) 50, var(--color-indigo-500));
--primary-accent-mix: color-mix(in lch, var(--color-blue-500) 50, var(--color-cyan-500));
--secondary-accent-mix: color-mix(in lch, var(--color-indigo-500) 50, var(--color-cyan-500));
/* Farben für Status-Indikatoren */
--success-hover: color-mix(in srgb, var(--color-green-500) 90, var(--color-white));
--success-active: color-mix(in srgb, var(--color-green-500) 90, var(--color-black));
--error-hover: color-mix(in srgb, var(--color-red-500) 90, var(--color-white));
--error-active: color-mix(in srgb, var(--color-red-500) 90, var(--color-black));
--warning-hover: color-mix(in srgb, var(--color-amber-500) 90, var(--color-white));
--warning-active: color-mix(in srgb, var(--color-amber-500) 90, var(--color-black));
/* Farbkombinationen für Theme-Variationen */
--theme-gradient-start: var(--color-blue-500);
--theme-gradient-end: var(--color-cyan-500);
--theme-gradient-mid: color-mix(in lch, var(--theme-gradient-start) 50, var(--theme-gradient-end));
/* Farbschemata für Hell-/Dunkelmodus */
--light-surface: color-mix(in srgb, var(--color-gray-50) 98%, var(--color-blue-500));
--light-surface-hover: color-mix(in srgb, var(--color-gray-100) 95%, var(--color-blue-500));
--dark-surface: color-mix(in srgb, var(--color-gray-900) 98%, var(--color-blue-500));
--dark-surface-hover: color-mix(in srgb, var(--color-gray-800) 95%, var(--color-blue-500));
/* Textfarben mit erhöhtem Kontrast für Barrierefreiheit */
--text-high-contrast: color-mix(in srgb, var(--color-gray-900) 95%, var(--color-blue-900));
--text-medium-contrast: color-mix(in srgb, var(--color-gray-700) 95%, var(--color-blue-700));
--text-low-contrast: color-mix(in srgb, var(--color-gray-500) 95%, var(--color-blue-500));
}
/* Dynamische Farbvarianten für alle Basisfarben */
.dynamic-color-variants {
/* Primärfarben */
--primary-lightest: color-mix(in srgb, var(--color-primary-500) 20, var(--color-white));
--primary-lighter: color-mix(in srgb, var(--color-primary-500) 40, var(--color-white));
--primary-light: color-mix(in srgb, var(--color-primary-500) 70, var(--color-white));
--primary: var(--color-primary-500);
--primary-dark: color-mix(in srgb, var(--color-primary-500) 70, var(--color-black));
--primary-darker: color-mix(in srgb, var(--color-primary-500) 40, var(--color-black));
--primary-darkest: color-mix(in srgb, var(--color-primary-500) 20, var(--color-black));
/* Sekundärfarben */
--secondary-lightest: color-mix(in srgb, var(--color-secondary-500) 20, var(--color-white));
--secondary-lighter: color-mix(in srgb, var(--color-secondary-500) 40, var(--color-white));
--secondary-light: color-mix(in srgb, var(--color-secondary-500) 70, var(--color-white));
--secondary: var(--color-secondary-500);
--secondary-dark: color-mix(in srgb, var(--color-secondary-500) 70, var(--color-black));
--secondary-darker: color-mix(in srgb, var(--color-secondary-500) 40, var(--color-black));
--secondary-darkest: color-mix(in srgb, var(--color-secondary-500) 20, var(--color-black));
/* Akzentfarben */
--accent-lightest: color-mix(in srgb, var(--color-accent-500) 20, var(--color-white));
--accent-lighter: color-mix(in srgb, var(--color-accent-500) 40, var(--color-white));
--accent-light: color-mix(in srgb, var(--color-accent-500) 70, var(--color-white));
--accent: var(--color-accent-500);
--accent-dark: color-mix(in srgb, var(--color-accent-500) 70, var(--color-black));
--accent-darker: color-mix(in srgb, var(--color-accent-500) 40, var(--color-black));
--accent-darkest: color-mix(in srgb, var(--color-accent-500) 20, var(--color-black));
}
/* Farbschemata für Nutzerinteraktionen */
.interactive-colors {
/* Hover-Zustände */
--btn-primary-hover: color-mix(in srgb, var(--color-primary-500) 90, var(--color-white));
--btn-primary-active: color-mix(in srgb, var(--color-primary-500) 90, var(--color-black));
--btn-secondary-hover: color-mix(in srgb, var(--color-secondary-500) 90, var(--color-white));
--btn-secondary-active: color-mix(in srgb, var(--color-secondary-500) 90, var(--color-black));
/* Link-Farben */
--link-default: var(--color-primary-600);
--link-hover: color-mix(in srgb, var(--color-primary-600) 80, var(--color-black));
--link-visited: color-mix(in lch, var(--color-primary-600) 70, var(--color-purple-600));
/* Fokus-Indikator */
--focus-ring: color-mix(in srgb, var(--color-primary-500) 80, var(--color-white));
--focus-ring-inset: color-mix(in srgb, var(--color-primary-500