@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 lines • 177 kB
Source Map (JSON)
{"version":3,"sourceRoot":null,"mappings":"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","sources":["Users/jseidel/GitHub/dragonfly/dist/temp/themes-temp-combined.css"],"sourcesContent":["@layer tokens, themes.aliases, themes.mode, themes.transitions;\n/* Datei: themes/theme-transitions.css */\n/**\n* Theme Transition Utilities\n*\n* Theme-specific transition adjustments and utility classes.\n* The @property definitions are in tokens/transitions.css.\n*\n* @layer themes.transitions\n*/\n\n@layer themes.transitions {\n/* Theme Transition Values - Light Mode */\n :root {\n --transition-bg: var(--color-background);\n --transition-fg: var(--color-text);\n --transition-border: var(--color-border);\n --transition-surface: var(--color-surface);\n --transition-accent: var(--color-primary);\n --transition-shadow-opacity: 0.1;\n }\n\n/* Theme Transition Values - Dark Mode */\n [data-theme=\"dark\"] {\n --transition-bg: var(--color-background);\n --transition-fg: var(--color-text);\n --transition-border: var(--color-border);\n --transition-surface: var(--color-surface);\n --transition-accent: var(--color-primary);\n --transition-shadow-opacity: 0.3;\n }\n\n/* Auto Theme - System Preference */\n @media (prefers-color-scheme: dark) {\n [data-theme=\"auto\"] {\n --transition-shadow-opacity: 0.3;\n }\n }\n\n/* Base Transition Utility Classes */\n .theme-transition {\n background-color: var(--transition-bg);\n border-color: var(--transition-border);\n color: var(--transition-fg);\n transition: var(--transition-colors);\n }\n\n .theme-transition-fast {\n background-color: var(--transition-bg);\n border-color: var(--transition-border);\n color: var(--transition-fg);\n transition:\n background-color var(--transition-fast) var(--transition-ease-out),\n color var(--transition-fast) var(--transition-ease-out),\n border-color var(--transition-fast) var(--transition-ease-out);\n }\n\n .theme-transition-slow {\n background-color: var(--transition-bg);\n border-color: var(--transition-border);\n color: var(--transition-fg);\n transition:\n background-color var(--transition-slow) var(--transition-ease-in-out),\n color var(--transition-slow) var(--transition-ease-in-out),\n border-color var(--transition-slow) var(--transition-ease-in-out);\n }\n\n/* Component-Specific Transition Classes */\n .card-transition {\n background-color: var(--transition-surface);\n border-color: var(--transition-border);\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / var(--transition-shadow-opacity)),\n 0 1px 2px -1px rgb(0 0 0 / var(--transition-shadow-opacity));\n transition: var(--transition-colors), var(--transition-shadow);\n }\n\n .button-transition {\n background-color: var(--transition-accent);\n border-color: var(--transition-accent);\n color: var(--transition-fg);\n transition: var(--transition-colors), var(--transition-transform);\n }\n\n .input-transition {\n background-color: var(--transition-surface);\n border-color: var(--transition-border);\n transition: var(--transition-colors), var(--transition-shadow);\n }\n\n .input-transition:focus {\n border-color: var(--transition-accent);\n box-shadow: 0 0 0 2px rgb(from var(--transition-accent) r g b / 2000%);\n }\n\n/* Theme Switch Animation */\n .theme-switching {\n animation: theme-switch var(--transition-normal) var(--transition-ease-out);\n }\n\n @keyframes theme-switch {\n 0 { opacity: 1; }\n\n 50 { opacity: 95%; }\n\n 100 { opacity: 1; }\n }\n\n/* Disable Transitions for Reduced Motion */\n @media (prefers-reduced-motion: reduce) {\n .theme-transition,\n .theme-transition-fast,\n .theme-transition-slow,\n .card-transition,\n .button-transition,\n .input-transition {\n transition: none;\n }\n\n .theme-switching {\n animation: none;\n }\n }\n}\n\n/* Datei: themes/light-mode.css */\n/**\n* Light Mode Theme\n*\n* Light mode definitions with [data-theme=\"light\"] scope.\n* Only overrides base tokens, aliases remain stable.\n*\n* @layer themes.mode\n*/\n\n@layer themes.mode {\n [data-theme=\"light\"] {\n/* Color Scheme */\n color-scheme: light;\n\n/* Base Color Tokens - Only override what's needed for light mode */\n --color-background: #fff;\n --color-surface: #f9fafb;\n --color-surface-elevated: #fff;\n --color-text: #1f2937;\n --color-text-muted: #6b7280;\n --color-text-inverse: #fff;\n --color-border: #e5e7eb;\n --color-border-strong: #d1d5db;\n\n/* Primary Colors - Light Mode Values */\n --color-primary: #06f;\n --color-primary-50: #e6f0ff;\n --color-primary-100: #cce0ff;\n --color-primary-500: #06f;\n --color-primary-600: #0052cc;\n --color-primary-900: #001433;\n\n/* Secondary Colors - Light Mode Values */\n --color-secondary: #5333ff;\n --color-secondary-50: #eeeaff;\n --color-secondary-500: #5333ff;\n --color-secondary-900: #110a33;\n\n/* Gray Colors - Light Mode Values */\n --color-gray-50: #f9f9fa;\n --color-gray-100: #f3f3f5;\n --color-gray-500: #8f96a8;\n --color-gray-900: #1d1f24;\n\n/* Focus and Interactive States */\n --color-focus: #4f46e5;\n --color-focus-glow: rgb(79 70 229 / 3000%);\n }\n}\n\n/* Datei: themes/index.css */\n/**\n* Themes Index\n*\n* Main theme system entry point. Includes only base themes and modes.\n* Theme variants must be loaded separately via CSS import or loadThemeVariant().\n*\n* Layer Structure:\n* - tokens: Base design tokens (@property definitions)\n* - themes.aliases: Semantic component aliases\n* - themes.mode: Light/dark mode definitions\n* - themes.transitions: Theme transition utilities\n*/\n\n\n/* Import base design tokens */\n/* Importierte Datei: tokens/index.css */\n/**\n* Design Token Index\n*\n* Zentraler Import aller Design Tokens für das Dragonfly Design System.\n* Diese Datei importiert alle Token-Kategorien in der richtigen Reihenfolge.\n*\n* @layer tokens\n* @version 2.0.0\n* @author Dragonfly Design System\n*/\n\n/* Core Design Tokens */\n/* Importierte Datei: tokens/colors.css */\n/**\n* Optimierte Color Properties mit @property\n*\n* Enthält nur semantische und animierbare Farb-Tokens.\n* Alle Abstufungen (z. B. -100 bis -900) werden im `@layer colors` gepflegt.\n*\n* @layer tokens.properties\n*/\n\n@layer tokens.properties {\n/* Base Colors */\n @property --color-white {\n inherits: true;\n initial-value: #fff;\n syntax: '<color>';\n }\n\n @property --color-black {\n inherits: true;\n initial-value: #000;\n syntax: '<color>';\n }\n\n/* Accessibility-specific colors */\n @property --color-gray-very-dark {\n inherits: true;\n initial-value: #1a1a1a;\n syntax: '<color>';\n }\n\n @property --color-gray-medium {\n inherits: true;\n initial-value: #6b6b6b;\n syntax: '<color>';\n }\n\n @property --color-gray-very-light {\n inherits: true;\n initial-value: #f2f2f2;\n syntax: '<color>';\n }\n\n/* Opacity-based colors */\n @property --color-overlay-dark {\n inherits: true;\n initial-value: rgb(0 0 0 / 80%);\n syntax: '<color>';\n }\n\n @property --color-overlay-medium {\n inherits: true;\n initial-value: rgb(0 0 0 / 60%);\n syntax: '<color>';\n }\n\n/* Basis-Farbtokens */\n @property --color-primary {\n inherits: true;\n initial-value: #06f;\n syntax: '<color>';\n }\n\n @property --color-secondary {\n inherits: true;\n initial-value: #5333ff;\n syntax: '<color>';\n }\n\n @property --color-success {\n inherits: true;\n initial-value: #10b981;\n syntax: '<color>';\n }\n\n @property --color-warning {\n inherits: true;\n initial-value: #f59e0b;\n syntax: '<color>';\n }\n\n @property --color-error {\n inherits: true;\n initial-value: #ef4444;\n syntax: '<color>';\n }\n\n @property --color-info {\n inherits: true;\n initial-value: #06f;\n syntax: '<color>';\n }\n\n @property --color-neutral {\n inherits: true;\n initial-value: #6b7280;\n syntax: '<color>';\n }\n\n/* Textfarben */\n @property --color-text {\n inherits: true;\n initial-value: #1f2937;\n syntax: '<color>';\n }\n\n @property --color-text-muted {\n inherits: true;\n initial-value: #6b7280;\n syntax: '<color>';\n }\n\n @property --color-text-inverse {\n inherits: true;\n initial-value: #fff;\n syntax: '<color>';\n }\n\n/* Oberflächenfarben */\n @property --color-background {\n inherits: true;\n initial-value: #fff;\n syntax: '<color>';\n }\n\n @property --color-surface {\n inherits: true;\n initial-value: #f9fafb;\n syntax: '<color>';\n }\n\n @property --color-surface-elevated {\n inherits: true;\n initial-value: #fff;\n syntax: '<color>';\n }\n\n/* Rahmenfarben */\n @property --color-border {\n inherits: true;\n initial-value: #e5e7eb;\n syntax: '<color>';\n }\n\n @property --color-border-strong {\n inherits: true;\n initial-value: #d1d5db;\n syntax: '<color>';\n }\n\n/* Für animierbare Transitions */\n @property --color-transition-primary {\n inherits: true;\n initial-value: #06f;\n syntax: '<color>';\n }\n\n @property --color-transition-surface {\n inherits: true;\n initial-value: #fff;\n syntax: '<color>';\n }\n\n @property --color-transition-text {\n inherits: true;\n initial-value: #1f2937;\n syntax: '<color>';\n }\n\n/* Erweiterte Farbabstufungen für Komponenten */\n\n/* Primary Color Scale */\n @property --color-primary-50 {\n inherits: true;\n initial-value: #eff6ff;\n syntax: '<color>';\n }\n\n @property --color-primary-100 {\n inherits: true;\n initial-value: #dbeafe;\n syntax: '<color>';\n }\n\n @property --color-primary-200 {\n inherits: true;\n initial-value: #bfdbfe;\n syntax: '<color>';\n }\n\n @property --color-primary-300 {\n inherits: true;\n initial-value: #93c5fd;\n syntax: '<color>';\n }\n\n @property --color-primary-400 {\n inherits: true;\n initial-value: #60a5fa;\n syntax: '<color>';\n }\n\n @property --color-primary-500 {\n inherits: true;\n initial-value: #3b82f6;\n syntax: '<color>';\n }\n\n @property --color-primary-600 {\n inherits: true;\n initial-value: #2563eb;\n syntax: '<color>';\n }\n\n @property --color-primary-700 {\n inherits: true;\n initial-value: #1d4ed8;\n syntax: '<color>';\n }\n\n @property --color-primary-800 {\n inherits: true;\n initial-value: #1e40af;\n syntax: '<color>';\n }\n\n @property --color-primary-900 {\n inherits: true;\n initial-value: #1e3a8a;\n syntax: '<color>';\n }\n\n/* Secondary Color Scale */\n @property --color-secondary-50 {\n inherits: true;\n initial-value: #f8fafc;\n syntax: '<color>';\n }\n\n @property --color-secondary-100 {\n inherits: true;\n initial-value: #f1f5f9;\n syntax: '<color>';\n }\n\n @property --color-secondary-200 {\n inherits: true;\n initial-value: #e2e8f0;\n syntax: '<color>';\n }\n\n @property --color-secondary-300 {\n inherits: true;\n initial-value: #cbd5e1;\n syntax: '<color>';\n }\n\n @property --color-secondary-400 {\n inherits: true;\n initial-value: #94a3b8;\n syntax: '<color>';\n }\n\n @property --color-secondary-500 {\n inherits: true;\n initial-value: #64748b;\n syntax: '<color>';\n }\n\n @property --color-secondary-600 {\n inherits: true;\n initial-value: #475569;\n syntax: '<color>';\n }\n\n @property --color-secondary-700 {\n inherits: true;\n initial-value: #334155;\n syntax: '<color>';\n }\n\n @property --color-secondary-800 {\n inherits: true;\n initial-value: #1e293b;\n syntax: '<color>';\n }\n\n @property --color-secondary-900 {\n inherits: true;\n initial-value: #0f172a;\n syntax: '<color>';\n }\n\n/* Success Color Scale */\n @property --color-success-50 {\n inherits: true;\n initial-value: #ecfdf5;\n syntax: '<color>';\n }\n\n @property --color-success-100 {\n inherits: true;\n initial-value: #d1fae5;\n syntax: '<color>';\n }\n\n @property --color-success-200 {\n inherits: true;\n initial-value: #a7f3d0;\n syntax: '<color>';\n }\n\n @property --color-success-300 {\n inherits: true;\n initial-value: #6ee7b7;\n syntax: '<color>';\n }\n\n @property --color-success-400 {\n inherits: true;\n initial-value: #34d399;\n syntax: '<color>';\n }\n\n @property --color-success-500 {\n inherits: true;\n initial-value: #10b981;\n syntax: '<color>';\n }\n\n @property --color-success-600 {\n inherits: true;\n initial-value: #059669;\n syntax: '<color>';\n }\n\n @property --color-success-700 {\n inherits: true;\n initial-value: #047857;\n syntax: '<color>';\n }\n\n @property --color-success-800 {\n inherits: true;\n initial-value: #065f46;\n syntax: '<color>';\n }\n\n @property --color-success-900 {\n inherits: true;\n initial-value: #064e3b;\n syntax: '<color>';\n }\n\n/* Warning Color Scale */\n @property --color-warning-50 {\n inherits: true;\n initial-value: #fffbeb;\n syntax: '<color>';\n }\n\n @property --color-warning-100 {\n inherits: true;\n initial-value: #fef3c7;\n syntax: '<color>';\n }\n\n @property --color-warning-200 {\n inherits: true;\n initial-value: #fde68a;\n syntax: '<color>';\n }\n\n @property --color-warning-300 {\n inherits: true;\n initial-value: #fcd34d;\n syntax: '<color>';\n }\n\n @property --color-warning-400 {\n inherits: true;\n initial-value: #fbbf24;\n syntax: '<color>';\n }\n\n @property --color-warning-500 {\n inherits: true;\n initial-value: #f59e0b;\n syntax: '<color>';\n }\n\n @property --color-warning-600 {\n inherits: true;\n initial-value: #d97706;\n syntax: '<color>';\n }\n\n @property --color-warning-700 {\n inherits: true;\n initial-value: #b45309;\n syntax: '<color>';\n }\n\n @property --color-warning-800 {\n inherits: true;\n initial-value: #92400e;\n syntax: '<color>';\n }\n\n @property --color-warning-900 {\n inherits: true;\n initial-value: #78350f;\n syntax: '<color>';\n }\n\n/* Error Color Scale */\n @property --color-error-50 {\n inherits: true;\n initial-value: #fef2f2;\n syntax: '<color>';\n }\n\n @property --color-error-100 {\n inherits: true;\n initial-value: #fee2e2;\n syntax: '<color>';\n }\n\n @property --color-error-200 {\n inherits: true;\n initial-value: #fecaca;\n syntax: '<color>';\n }\n\n @property --color-error-300 {\n inherits: true;\n initial-value: #fca5a5;\n syntax: '<color>';\n }\n\n @property --color-error-400 {\n inherits: true;\n initial-value: #f87171;\n syntax: '<color>';\n }\n\n @property --color-error-500 {\n inherits: true;\n initial-value: #ef4444;\n syntax: '<color>';\n }\n\n @property --color-error-600 {\n inherits: true;\n initial-value: #dc2626;\n syntax: '<color>';\n }\n\n @property --color-error-700 {\n inherits: true;\n initial-value: #b91c1c;\n syntax: '<color>';\n }\n\n @property --color-error-800 {\n inherits: true;\n initial-value: #991b1b;\n syntax: '<color>';\n }\n\n @property --color-error-900 {\n inherits: true;\n initial-value: #7f1d1d;\n syntax: '<color>';\n }\n\n/* Info Color Scale */\n @property --color-info-50 {\n inherits: true;\n initial-value: #f0f9ff;\n syntax: '<color>';\n }\n\n @property --color-info-100 {\n inherits: true;\n initial-value: #e0f2fe;\n syntax: '<color>';\n }\n\n @property --color-info-200 {\n inherits: true;\n initial-value: #bae6fd;\n syntax: '<color>';\n }\n\n @property --color-info-300 {\n inherits: true;\n initial-value: #7dd3fc;\n syntax: '<color>';\n }\n\n @property --color-info-400 {\n inherits: true;\n initial-value: #38bdf8;\n syntax: '<color>';\n }\n\n @property --color-info-500 {\n inherits: true;\n initial-value: #0ea5e9;\n syntax: '<color>';\n }\n\n @property --color-info-600 {\n inherits: true;\n initial-value: #0284c7;\n syntax: '<color>';\n }\n\n @property --color-info-700 {\n inherits: true;\n initial-value: #0369a1;\n syntax: '<color>';\n }\n\n @property --color-info-800 {\n inherits: true;\n initial-value: #075985;\n syntax: '<color>';\n }\n\n @property --color-info-900 {\n inherits: true;\n initial-value: #0c4a6e;\n syntax: '<color>';\n }\n\n/* Neutral Color Scale */\n @property --color-neutral-50 {\n inherits: true;\n initial-value: #f9fafb;\n syntax: '<color>';\n }\n\n @property --color-neutral-100 {\n inherits: true;\n initial-value: #f3f4f6;\n syntax: '<color>';\n }\n\n @property --color-neutral-200 {\n inherits: true;\n initial-value: #e5e7eb;\n syntax: '<color>';\n }\n\n @property --color-neutral-300 {\n inherits: true;\n initial-value: #d1d5db;\n syntax: '<color>';\n }\n\n @property --color-neutral-400 {\n inherits: true;\n initial-value: #9ca3af;\n syntax: '<color>';\n }\n\n @property --color-neutral-500 {\n inherits: true;\n initial-value: #6b7280;\n syntax: '<color>';\n }\n\n @property --color-neutral-600 {\n inherits: true;\n initial-value: #4b5563;\n syntax: '<color>';\n }\n\n @property --color-neutral-700 {\n inherits: true;\n initial-value: #374151;\n syntax: '<color>';\n }\n\n @property --color-neutral-800 {\n inherits: true;\n initial-value: #1f2937;\n syntax: '<color>';\n }\n\n @property --color-neutral-900 {\n inherits: true;\n initial-value: #111827;\n syntax: '<color>';\n }\n\n/* Gray Color Scale (alias für neutral) */\n @property --color-gray-50 {\n inherits: true;\n initial-value: #f9fafb;\n syntax: '<color>';\n }\n\n @property --color-gray-100 {\n inherits: true;\n initial-value: #f3f4f6;\n syntax: '<color>';\n }\n\n @property --color-gray-200 {\n inherits: true;\n initial-value: #e5e7eb;\n syntax: '<color>';\n }\n\n @property --color-gray-300 {\n inherits: true;\n initial-value: #d1d5db;\n syntax: '<color>';\n }\n\n @property --color-gray-400 {\n inherits: true;\n initial-value: #9ca3af;\n syntax: '<color>';\n }\n\n @property --color-gray-500 {\n inherits: true;\n initial-value: #6b7280;\n syntax: '<color>';\n }\n\n @property --color-gray-600 {\n inherits: true;\n initial-value: #4b5563;\n syntax: '<color>';\n }\n\n @property --color-gray-700 {\n inherits: true;\n initial-value: #374151;\n syntax: '<color>';\n }\n\n @property --color-gray-800 {\n inherits: true;\n initial-value: #1f2937;\n syntax: '<color>';\n }\n\n @property --color-gray-900 {\n inherits: true;\n initial-value: #111827;\n syntax: '<color>';\n }\n\n/* Text Color Scale */\n @property --color-text-50 {\n inherits: true;\n initial-value: #f9fafb;\n syntax: '<color>';\n }\n\n @property --color-text-100 {\n inherits: true;\n initial-value: #f3f4f6;\n syntax: '<color>';\n }\n\n @property --color-text-200 {\n inherits: true;\n initial-value: #e5e7eb;\n syntax: '<color>';\n }\n\n @property --color-text-300 {\n inherits: true;\n initial-value: #d1d5db;\n syntax: '<color>';\n }\n\n @property --color-text-400 {\n inherits: true;\n initial-value: #9ca3af;\n syntax: '<color>';\n }\n\n @property --color-text-500 {\n inherits: true;\n initial-value: #6b7280;\n syntax: '<color>';\n }\n\n @property --color-text-600 {\n inherits: true;\n initial-value: #4b5563;\n syntax: '<color>';\n }\n\n @property --color-text-700 {\n inherits: true;\n initial-value: #374151;\n syntax: '<color>';\n }\n\n @property --color-text-800 {\n inherits: true;\n initial-value: #1f2937;\n syntax: '<color>';\n }\n\n @property --color-text-900 {\n inherits: true;\n initial-value: #111827;\n syntax: '<color>';\n }\n\n/* Surface Color Scale */\n @property --color-surface-50 {\n inherits: true;\n initial-value: #fafafa;\n syntax: '<color>';\n }\n\n @property --color-surface-100 {\n inherits: true;\n initial-value: #f5f5f5;\n syntax: '<color>';\n }\n\n @property --color-surface-200 {\n inherits: true;\n initial-value: #eee;\n syntax: '<color>';\n }\n\n @property --color-surface-300 {\n inherits: true;\n initial-value: #e0e0e0;\n syntax: '<color>';\n }\n\n/* Border Color Scale */\n @property --color-border-50 {\n inherits: true;\n initial-value: #fafafa;\n syntax: '<color>';\n }\n\n @property --color-border-100 {\n inherits: true;\n initial-value: #f4f4f5;\n syntax: '<color>';\n }\n\n @property --color-border-200 {\n inherits: true;\n initial-value: #e4e4e7;\n syntax: '<color>';\n }\n\n @property --color-border-300 {\n inherits: true;\n initial-value: #d4d4d8;\n syntax: '<color>';\n }\n}\n\n/* Fallback Values für alle Farbabstufungen */\n:root {\n/* Primary Scale */\n --color-primary-50: #eff6ff;\n --color-primary-100: #dbeafe;\n --color-primary-200: #bfdbfe;\n --color-primary-300: #93c5fd;\n --color-primary-400: #60a5fa;\n --color-primary-500: #3b82f6;\n --color-primary-600: #2563eb;\n --color-primary-700: #1d4ed8;\n --color-primary-800: #1e40af;\n --color-primary-900: #1e3a8a;\n\n/* Secondary Scale */\n --color-secondary-50: #f8fafc;\n --color-secondary-100: #f1f5f9;\n --color-secondary-200: #e2e8f0;\n --color-secondary-300: #cbd5e1;\n --color-secondary-400: #94a3b8;\n --color-secondary-500: #64748b;\n --color-secondary-600: #475569;\n --color-secondary-700: #334155;\n --color-secondary-800: #1e293b;\n --color-secondary-900: #0f172a;\n\n/* Success Scale */\n --color-success-50: #ecfdf5;\n --color-success-100: #d1fae5;\n --color-success-200: #a7f3d0;\n --color-success-300: #6ee7b7;\n --color-success-400: #34d399;\n --color-success-500: #10b981;\n --color-success-600: #059669;\n --color-success-700: #047857;\n --color-success-800: #065f46;\n --color-success-900: #064e3b;\n\n/* Warning Scale */\n --color-warning-50: #fffbeb;\n --color-warning-100: #fef3c7;\n --color-warning-200: #fde68a;\n --color-warning-300: #fcd34d;\n --color-warning-400: #fbbf24;\n --color-warning-500: #f59e0b;\n --color-warning-600: #d97706;\n --color-warning-700: #b45309;\n --color-warning-800: #92400e;\n --color-warning-900: #78350f;\n\n/* Error Scale */\n --color-error-50: #fef2f2;\n --color-error-100: #fee2e2;\n --color-error-200: #fecaca;\n --color-error-300: #fca5a5;\n --color-error-400: #f87171;\n --color-error-500: #ef4444;\n --color-error-600: #dc2626;\n --color-error-700: #b91c1c;\n --color-error-800: #991b1b;\n --color-error-900: #7f1d1d;\n\n/* Info Scale */\n --color-info-50: #f0f9ff;\n --color-info-100: #e0f2fe;\n --color-info-200: #bae6fd;\n --color-info-300: #7dd3fc;\n --color-info-400: #38bdf8;\n --color-info-500: #0ea5e9;\n --color-info-600: #0284c7;\n --color-info-700: #0369a1;\n --color-info-800: #075985;\n --color-info-900: #0c4a6e;\n\n/* Neutral/Gray Scale */\n --color-neutral-50: #f9fafb;\n --color-neutral-100: #f3f4f6;\n --color-neutral-200: #e5e7eb;\n --color-neutral-300: #d1d5db;\n --color-neutral-400: #9ca3af;\n --color-neutral-500: #6b7280;\n --color-neutral-600: #4b5563;\n --color-neutral-700: #374151;\n --color-neutral-800: #1f2937;\n --color-neutral-900: #111827;\n --color-gray-50: var(--color-neutral-50);\n --color-gray-100: var(--color-neutral-100);\n --color-gray-200: var(--color-neutral-200);\n --color-gray-300: var(--color-neutral-300);\n --color-gray-400: var(--color-neutral-400);\n --color-gray-500: var(--color-neutral-500);\n --color-gray-600: var(--color-neutral-600);\n --color-gray-700: var(--color-neutral-700);\n --color-gray-800: var(--color-neutral-800);\n --color-gray-900: var(--color-neutral-900);\n\n/* Text Scale */\n --color-text-50: var(--color-neutral-50);\n --color-text-100: var(--color-neutral-100);\n --color-text-200: var(--color-neutral-200);\n --color-text-300: var(--color-neutral-300);\n --color-text-400: var(--color-neutral-400);\n --color-text-500: var(--color-neutral-500);\n --color-text-600: var(--color-neutral-600);\n --color-text-700: var(--color-neutral-700);\n --color-text-800: var(--color-neutral-800);\n --color-text-900: var(--color-neutral-900);\n\n/* Surface Scale */\n --color-surface-50: #fafafa;\n --color-surface-100: #f5f5f5;\n --color-surface-200: #eee;\n --color-surface-300: #e0e0e0;\n\n/* Border Scale */\n --color-border-50: #fafafa;\n --color-border-100: #f4f4f5;\n --color-border-200: #e4e4e7;\n --color-border-300: #d4d4d8;\n\n/* Basic Utility Colors */\n --color-white: #fff;\n --color-black: #000;\n --color-transparent: transparent;\n\n/* Semantic Color Aliases */\n --color-danger: var(--color-error);\n --color-danger-50: var(--color-error-50);\n --color-danger-100: var(--color-error-100);\n --color-danger-200: var(--color-error-200);\n --color-danger-300: var(--color-error-300);\n --color-danger-400: var(--color-error-400);\n --color-danger-500: var(--color-error-500);\n --color-danger-600: var(--color-error-600);\n --color-danger-700: var(--color-error-700);\n --color-danger-800: var(--color-error-800);\n --color-danger-900: var(--color-error-900);\n\n/* Social Media Brand Colors */\n --color-twitter: #1da1f2;\n --color-facebook: #4267b2;\n --color-linkedin: #0077b5;\n --color-github: #181717;\n --color-youtube: #f00;\n --color-instagram: #e4405f;\n\n/* Additional utility colors */\n --color-gray-very-dark: #1a1a1a;\n --color-gray-medium: #6b6b6b;\n --color-gray-very-light: #f2f2f2;\n --color-overlay-dark: rgb(0 0 0 / 80%);\n --color-overlay-medium: rgb(0 0 0 / 60%);\n}\n\n\n/* Importierte Datei: tokens/spacing.css */\n/**\n* Spacing Properties with @property Definitions\n*\n* Typed CSS custom properties for spacing using @property.\n* This enables better tooling support, autocomplete, and animation capabilities.\n*\n* @layer tokens.properties\n*/\n\n@layer tokens.properties {\n/* Base Spacing Properties - Complete Scale */\n @property --space-0 {\n inherits: true;\n initial-value: 0;\n syntax: '<length>';\n }\n\n @property --space-px {\n inherits: true;\n initial-value: 1px;\n syntax: '<length>';\n }\n\n @property --space-1 {\n inherits: true;\n initial-value: 0.25rem;\n syntax: '<length>';\n }\n\n @property --space-2 {\n inherits: true;\n initial-value: 0.5rem;\n syntax: '<length>';\n }\n\n @property --space-3 {\n inherits: true;\n initial-value: 0.75rem;\n syntax: '<length>';\n }\n\n @property --space-4 {\n inherits: true;\n initial-value: 1rem;\n syntax: '<length>';\n }\n\n @property --space-5 {\n inherits: true;\n initial-value: 1.25rem;\n syntax: '<length>';\n }\n\n @property --space-6 {\n inherits: true;\n initial-value: 1.5rem;\n syntax: '<length>';\n }\n\n @property --space-7 {\n inherits: true;\n initial-value: 1.75rem;\n syntax: '<length>';\n }\n\n @property --space-8 {\n inherits: true;\n initial-value: 2rem;\n syntax: '<length>';\n }\n\n @property --space-9 {\n inherits: true;\n initial-value: 2.25rem;\n syntax: '<length>';\n }\n\n @property --space-10 {\n inherits: true;\n initial-value: 2.5rem;\n syntax: '<length>';\n }\n\n @property --space-11 {\n inherits: true;\n initial-value: 2.75rem;\n syntax: '<length>';\n }\n\n @property --space-12 {\n inherits: true;\n initial-value: 3rem;\n syntax: '<length>';\n }\n\n @property --space-14 {\n inherits: true;\n initial-value: 3.5rem;\n syntax: '<length>';\n }\n\n @property --space-16 {\n inherits: true;\n initial-value: 4rem;\n syntax: '<length>';\n }\n\n @property --space-20 {\n inherits: true;\n initial-value: 5rem;\n syntax: '<length>';\n }\n\n @property --space-24 {\n inherits: true;\n initial-value: 6rem;\n syntax: '<length>';\n }\n\n @property --space-28 {\n inherits: true;\n initial-value: 7rem;\n syntax: '<length>';\n }\n\n @property --space-32 {\n inherits: true;\n initial-value: 8rem;\n syntax: '<length>';\n }\n\n @property --space-36 {\n inherits: true;\n initial-value: 9rem;\n syntax: '<length>';\n }\n\n @property --space-40 {\n inherits: true;\n initial-value: 10rem;\n syntax: '<length>';\n }\n\n @property --space-44 {\n inherits: true;\n initial-value: 11rem;\n syntax: '<length>';\n }\n\n @property --space-48 {\n inherits: true;\n initial-value: 12rem;\n syntax: '<length>';\n }\n\n @property --space-52 {\n inherits: true;\n initial-value: 13rem;\n syntax: '<length>';\n }\n\n @property --space-56 {\n inherits: true;\n initial-value: 14rem;\n syntax: '<length>';\n }\n\n @property --space-60 {\n inherits: true;\n initial-value: 15rem;\n syntax: '<length>';\n }\n\n @property --space-64 {\n inherits: true;\n initial-value: 16rem;\n syntax: '<length>';\n }\n\n @property --space-72 {\n inherits: true;\n initial-value: 18rem;\n syntax: '<length>';\n }\n\n @property --space-80 {\n inherits: true;\n initial-value: 20rem;\n syntax: '<length>';\n }\n\n @property --space-96 {\n inherits: true;\n initial-value: 24rem;\n syntax: '<length>';\n }\n\n/* Large spacing for special cases */\n @property --space-large-200 {\n inherits: true;\n initial-value: 200px;\n syntax: '<length>';\n }\n\n @property --space-large-30rem {\n inherits: true;\n initial-value: 30rem;\n syntax: '<length>';\n }\n\n @property --space-small-10px {\n inherits: true;\n initial-value: 10px;\n syntax: '<length>';\n }\n\n/* Semantic Spacing Aliases */\n @property --space-xs {\n inherits: true;\n initial-value: 0.25rem;\n syntax: '<length>';\n }\n\n @property --space-sm {\n inherits: true;\n initial-value: 0.5rem;\n syntax: '<length>';\n }\n\n @property --space-md {\n inherits: true;\n initial-value: 1rem;\n syntax: '<length>';\n }\n\n @property --space-lg {\n inherits: true;\n initial-value: 1.5rem;\n syntax: '<length>';\n }\n\n @property --space-xl {\n inherits: true;\n initial-value: 2rem;\n syntax: '<length>';\n }\n\n @property --space-2xl {\n inherits: true;\n initial-value: 3rem;\n syntax: '<length>';\n }\n\n @property --space-3xl {\n inherits: true;\n initial-value: 4rem;\n syntax: '<length>';\n }\n\n/* Component-Specific Spacing Properties */\n @property --space-button-padding-x {\n inherits: true;\n initial-value: 1rem;\n syntax: '<length>';\n }\n\n @property --space-button-padding-y {\n inherits: true;\n initial-value: 0.5rem;\n syntax: '<length>';\n }\n\n @property --space-card-padding {\n inherits: true;\n initial-value: 1.5rem;\n syntax: '<length>';\n }\n\n @property --space-form-gap {\n inherits: true;\n initial-value: 1rem;\n syntax: '<length>';\n }\n\n @property --space-section-gap {\n inherits: true;\n initial-value: 3rem;\n syntax: '<length>';\n }\n\n @property --space-input-padding {\n inherits: true;\n initial-value: 0.75rem;\n syntax: '<length>';\n }\n\n @property --space-modal-padding {\n inherits: true;\n initial-value: 1.5rem;\n syntax: '<length>';\n }\n\n/* Gap Properties */\n @property --space-gap-xs {\n inherits: true;\n initial-value: 0.25rem;\n syntax: '<length>';\n }\n\n @property --space-gap-sm {\n inherits: true;\n initial-value: 0.5rem;\n syntax: '<length>';\n }\n\n @property --space-gap-md {\n inherits: true;\n initial-value: 1rem;\n syntax: '<length>';\n }\n\n @property --space-gap-lg {\n inherits: true;\n initial-value: 1.5rem;\n syntax: '<length>';\n }\n\n @property --space-gap-xl {\n inherits: true;\n initial-value: 2rem;\n syntax: '<length>';\n }\n\n/* Layout Spacing Properties */\n @property --space-container-padding {\n inherits: true;\n initial-value: 1rem;\n syntax: '<length>';\n }\n\n @property --space-grid-gap {\n inherits: true;\n initial-value: 1rem;\n syntax: '<length>';\n }\n\n @property --space-flex-gap {\n inherits: true;\n initial-value: 1rem;\n syntax: '<length>';\n }\n\n/* Animatable Spacing Properties */\n @property --space-transition-padding {\n inherits: true;\n initial-value: 1rem;\n syntax: '<length>';\n }\n\n @property --space-transition-margin {\n inherits: true;\n initial-value: 1rem;\n syntax: '<length>';\n }\n\n @property --space-transition-gap {\n inherits: true;\n initial-value: 1rem;\n syntax: '<length>';\n }\n\n/* Initial Value Definitions */\n :root {\n/* Base Spacing Scale */\n --space-0: 0;\n --space-px: 1px;\n --space-1: 0.25rem;\n --space-2: 0.5rem;\n --space-3: 0.75rem;\n --space-4: 1rem;\n --space-5: 1.25rem;\n --space-6: 1.5rem;\n --space-7: 1.75rem;\n --space-8: 2rem;\n --space-9: 2.25rem;\n --space-10: 2.5rem;\n --space-11: 2.75rem;\n --space-12: 3rem;\n --space-14: 3.5rem;\n --space-16: 4rem;\n --space-20: 5rem;\n --space-24: 6rem;\n --space-28: 7rem;\n --space-32: 8rem;\n --space-36: 9rem;\n --space-40: 10rem;\n --space-44: 11rem;\n --space-48: 12rem;\n --space-52: 13rem;\n --space-56: 14rem;\n --space-60: 15rem;\n --space-64: 16rem;\n --space-72: 18rem;\n --space-80: 20rem;\n --space-96: 24rem;\n\n/* Component Spacing */\n --space-button-padding-x: var(--space-md);\n --space-button-padding-y: var(--space-sm);\n --space-card-padding: var(--space-lg);\n --space-form-gap: var(--space-md);\n --space-section-gap: var(--space-3xl);\n\n/* Layout Spacing */\n --space-container-padding: var(--space-md);\n --space-grid-gap: var(--space-md);\n --space-flex-gap: var(--space-md);\n\n/* Transition Spacing */\n --space-transition-padding: var(--space-md);\n --space-transition-margin: var(--space-md);\n --space-transition-gap: var(--space-md);\n }\n}\n\n/* Importierte Datei: tokens/typography.css */\n/**\n* Typography Properties with @property Definitions\n*\n* Typed CSS custom properties for typography using @property.\n* This enables better tooling support, autocomplete, and animation capabilities.\n*\n* @layer tokens.properties\n*/\n\n@layer tokens.properties {\n/* Font Size Properties */\n @property --font-size-xs {\n inherits: true;\n initial-value: 0.75rem;\n syntax: '<length>';\n }\n\n @property --font-size-sm {\n inherits: true;\n initial-value: 0.875rem;\n syntax: '<length>';\n }\n\n @property --font-size-base {\n inherits: true;\n initial-value: 1rem;\n syntax: '<length>';\n }\n\n @property --font-size-lg {\n inherits: true;\n initial-value: 1.125rem;\n syntax: '<length>';\n }\n\n @property --font-size-xl {\n inherits: true;\n initial-value: 1.25rem;\n syntax: '<length>';\n }\n\n @property --font-size-2xl {\n inherits: true;\n initial-value: 1.5rem;\n syntax: '<length>';\n }\n\n @property --font-size-3xl {\n inherits: true;\n initial-value: 1.875rem;\n syntax: '<length>';\n }\n\n @property --font-size-4xl {\n inherits: true;\n initial-value: 2.25rem;\n syntax: '<length>';\n }\n\n @property --font-size-5xl {\n inherits: true;\n initial-value: 3rem;\n syntax: '<length>';\n }\n\n @property --font-size-6xl {\n inherits: true;\n initial-value: 4rem;\n syntax: '<length>';\n }\n\n/* Text Size Aliases (für Komponenten-Kompatibilität) */\n @property --text-xs {\n inherits: true;\n initial-value: 0.75rem;\n syntax: '<length>';\n }\n\n @property --text-sm {\n inherits: true;\n initial-value: 0.875rem;\n syntax: '<length>';\n }\n\n @property --text-base {\n inherits: true;\n initial-value: 1rem;\n syntax: '<length>';\n }\n\n @property --text-lg {\n inherits: true;\n initial-value: 1.125rem;\n syntax: '<length>';\n }\n\n @property --text-xl {\n inherits: true;\n initial-value: 1.25rem;\n syntax: '<length>';\n }\n\n @property --text-2xl {\n inherits: true;\n initial-value: 1.5rem;\n syntax: '<length>';\n }\n\n/* Line Height Properties */\n @property --line-height-tight {\n inherits: true;\n initial-value: 1.25;\n syntax: '<number>';\n }\n\n @property --line-height-snug {\n inherits: true;\n initial-value: 1.375;\n syntax: '<number>';\n }\n\n @property --line-height-normal {\n inherits: true;\n initial-value: 1.5;\n syntax: '<number>';\n }\n\n @property --line-height-relaxed {\n inherits: true;\n initial-value: 1.625;\n syntax: '<number>';\n }\n\n @property --line-height-loose {\n inherits: true;\n initial-value: 2;\n syntax: '<number>';\n }\n\n/* Font Weight Properties */\n @property --font-weight-thin {\n inherits: true;\n initial-value: 100;\n syntax: '<number>';\n }\n\n @property --font-weight-extralight {\n inherits: true;\n initial-value: 200;\n syntax: '<number>';\n }\n\n @property --font-weight-light {\n inherits: true;\n initial-value: 300;\n syntax: '<number>';\n }\n\n @property --font-weight-normal {\n inherits: true;\n initial-value: 400;\n syntax: '<number>';\n }\n\n @property --font-weight-medium {\n inherits: true;\n initial-value: 500;\n syntax: '<number>';\n }\n\n @property --font-weight-semibold {\n inherits: true;\n initial-value: 600;\n syntax: '<number>';\n }\n\n @property --font-weight-bold {\n inherits: true;\n initial-value: 700;\n syntax: '<number>';\n }\n\n @property --font-weight-extrabold {\n inherits: true;\n initial-value: 800;\n syntax: '<number>';\n }\n\n @property --font-weight-black {\n inherits: true;\n initial-value: 900;\n syntax: '<number>';\n }\n\n/* Font Weight Aliases (für Komponenten-Kompatibilität) */\n @property --font-light {\n inherits: true;\n initial-value: 300;\n syntax: '<number>';\n }\n\n @property --font-normal {\n inherits: true;\n initial-value: 400;\n syntax: '<number>';\n }\n\n @property --font-medium {\n inherits: true;\n initial-value: 500;\n syntax: '<number>';\n }\n\n @property --font-semibold {\n inherits: true;\n initial-value: 600;\n syntax: '<number>';\n }\n\n @property --font-bold {\n inherits: true;\n initial-value: 700;\n syntax: '<number>';\n }\n\n/* Font Family Properties - Defined only in :root for better performance */\n\n/* Letter Spacing Properties */\n @property --letter-spacing-tighter {\n inherits: true;\n initial-value: -0.05em;\n syntax: '<length>';\n }\n\n @property --letter-spacing-tight {\n inherits: true;\n initial-value: -0.025em;\n syntax: '<length>';\n }\n\n @property --letter-spacing-normal {\n inherits: true;\n initial-value: 0;\n syntax: '<length>';\n }\n\n @property --letter-spacing-wide {\n inherits: true;\n initial-value: 0.025em;\n syntax: '<length>';\n }\n\n @property --letter-spacing-wider {\n inherits: true;\n initial-value: 0.05em;\n syntax: '<length>';\n }\n\n @property --letter-spacing-widest {\n inherits: true;\n initial-value: 0.1em;\n syntax: '<length>';\n }\n\n/* Animatable Typography Properties */\n @property --font-size-transition {\n inherits: true;\n initial-value: 1rem;\n syntax: '<length>';\n }\n\n @property --line-height-transition {\n inherits: true;\n initial-value: 1.5;\n syntax: '<number>';\n }\n\n @property --letter-spacing-transition {\n inherits: true;\n initial-value: 0;\n syntax: '<length>';\n }\n}\n\n/* Initial Value Definitions */\n:root {\n/* Font Sizes */\n --font-size-xs: 0.75rem;\n --font-size-sm: 0.875rem;\n --font-size-base: 1rem;\n --font-size-lg: 1.125rem;\n --font-size-xl: 1.25rem;\n --font-size-2xl: 1.5rem;\n --font-size-3xl: 1.875rem;\n --font-size-4xl: 2.25rem;\n --font-size-5xl: 3rem;\n --font-size-6xl: 4rem;\n\n/* Text Size Aliases */\n --text-xs: var(--font-size-xs);\n --text-sm: var(--font-size-sm);\n --text-base: var(--font-size-base);\n --text-lg: var(--font-size-lg);\n --text-xl: var(--font-size-xl);\n --text-2xl: var(--font-size-2xl);\n\n/* Line Heights */\n --line-height-tight: 1.25;\n --line-height-snug: 1.375;\n --line-height-normal: 1.5;\n --line-height-relaxed: 1.625;\n --line-height-loose: 2;\n\n/* Font Weights */\n --font-weight-thin: 100;\n --font-weight-extralight: 200;\n --font-weight-light: 300;\n --font-weight-normal: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --font-weight-extrabold: 800;\n --font-weight-black: 900;\n\n/* Font Weight Aliases */\n --font-light: var(--font-weight-light);\n --font-normal: var(--font-weight-normal);\n --font-medium: var(--font-weight-medium);\n --font-semibold: var(--font-weight-semibold);\n --font-bold: var(--font-weight-bold);\n\n/* Font Families */\n --font-family-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif;\n --font-family-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif;\n --font-family-mono: ui-monospace, SFMono-Regular, \"SF Mono\", Consolas, \"Liberation Mono\", Menlo, monospace;\n\n/* Font Family Aliases (kurze Versionen für Komponenten) */\n --font-sans: var(--font-family-sans);\n --font-serif: var(--font-family-serif);\n --font-mono: var(--font-family-mono);\n\n/* Letter Spacing */\n --letter-spacing-tight: -0.025em;\n --letter-spacing-normal: 0;\n --letter-spacing-wide: 0.025em;\n --letter-spacing-wider: 0.05em;\n\n/* Transition Properties */\n --font-size-transition: var(--font-size-base);\n --line-height-transition: var(--line-height-normal);\n --letter-spacing-transition: var(--letter-spacing-normal);\n}\n\n/* Importierte Datei: tokens/radius.css */\n/**\n* Border Radius Properties with @property Definitions\n*\n* Typed CSS custom properties for border-radius using @property.\n* This enables better tooling support, autocomplete, and animation capabilities.\n*\n* @layer tokens.properties\n*/\n\n@layer tokens.properties {\n/* Base Radius Properties */\n @property --radius-none {\n inherits: true;\n initial-value: 0;\n syntax: '<length>';\n }\n\n @property --radius-xs {\n inherits: true;\n initial-value: 0.125rem;\n syntax: '<length>';\n }\n\n @property --radius-sm {\n inherits: true;\n initial-value: 0.25rem;\n syntax: '<length>';\n }\n\n @property --radius-md {\n inherits: true;\n initial-value: 0.375rem;\n syntax: '<length>';\n }\n\n @property --radius-lg {\n inherits: true;\n initial-value: 0.5rem;\n syntax: '<length>';\n }\n\n @property --radius-xl {\n inherits: true;\n initial-value: 0.75rem;\n syntax: '<length>';\n }\n\n @property --radius-2xl {\n inherits: true;\n initial-value: 1rem;\n syntax: '<length>';\n }\n\n @property --radius-3xl {\n inherits: true;\n initial-value: 1.5rem;\n syntax: '<length>';\n }\n\n @property --radius-full {\n inherits: true;\n initial-value: 9999px;\n syntax: '<length-percentage>';\n }\n\n/* Component-Specific Radius Properties */\n @property --radius-button {\n inherits: true;\n initial-value: 0.375rem;\n syntax: '<length>';\n }\n\n @property --radius-card {\n inherits: true;\n initial-value: 0.5rem;\n syntax: '<length>';\n }\n\n @property --radius-input {\n inherits: true;\n initial-value: 0.375rem;\n syntax: '<length>';\n }\n\n @property --radius-modal {\n inherits: true;\n initial-value: 0.75rem;\n syntax: '<length>';\n }\n\n @property --radius-badge {\n inherits: true;\n initial-value: 0.25rem;\n syntax: '<length>';\n }\n\n @property --radius-avatar {\n inherits: true;\n initial-value: 50;\n syntax: '<length-percentage>';\n }\n\n/* Interactive Radius Properties */\n @property --radius-hover {\n inherits: true;\n initial-value: 0.5rem;\n syntax: '<length>';\n }\n\n @property --radius-focus {\n inherits: true;\n initial-value: 0.375rem;\n syntax: '<length>';\n }\n\n/* Animatable Radius Properties */\n @property --radius-transition {\n inherits: true;\n initial-value: 0.375rem;\n syntax: '<length>';\n }\n\n @property --radius-transition-hover {\n inherits: true;\n initial-value: 0.5rem;\n syntax: '<length>';\n }\n\n/* Initial Value Definitions */\n :root {\n/* Base Radius Scale */\n --radius-none: 0;\n --radius-xs: 0.125rem;\n --radius-sm: 0.25rem;\n --radius-md: 0.375rem;\n --radius-lg: 0.5rem;\n --radius-xl: 0.75rem;\n --radius-2xl: 1rem;\n --radius-3xl: 1.5rem;\n --radius-full: 9999px;\n\n/* Component Radius */\n --radius-button: var(--radius-md);\n --radius-card: var(--radius-lg);\n --radius-input: var(--radius-md);\n --radius-modal: var(--radius-xl);\n --radius-badge: var(--radius-sm);\n --radius-avatar: 50;\n\n/* Interactive Radius */\n --radius-hover: var(--radius-lg);\n --radius-focus: var(--radius-md);\n\n/* Transition Radius */\n --radius-transition: var(--radius-md);\n --radius-transition-hover: var(--radius-lg);\n\n/* Border-Radius Aliases (für Kompatibilität mit Typography-System) */\n --border-radius-none: var(--radius-none);\n --border-radius-sm: var(--radius-sm);\n --border-radius-md: var(--radius-md);\n --border-radius-lg: var(--radius-lg);\n --border-radius-xl: var(--radius-xl);\n --border-radius-full: var(--radius-full);\n }\n}\n\n/* Importierte Datei: tokens/shadows.css */\n/**\n* Shadow Properties with @property Definitions\n*\n* Typed CSS custom properties for shadows using @property.\n* This enables better tooling support, autocomplete, and animation capabilities.\n*\n* @layer tokens.properties\n*/\n\n@layer tokens.properties {\n/* Base Shadow Properties */\n @property --shadow-none {\n inherits: false;\n initial-value: none;\n\n }\n\n @property --shadow-xs {\n inherits: false;\n initial-value: 0 1px 2px 0 rgb(0 0 0 / 5%);\n\n }\n\n @property --shadow-sm {\n inherits: false;\n i