{"version":3,"sourceRoot":null,"mappings":"AAAA,cA4qEE,mFAMA,qFAMA,kFAOA,4FAMA,8FAMA,2FAOA,4LAMA,2LAMA,gMAOA,gMAOA,kFAMA,qFAMA,yFAMA,0FAMA,yFAMA,6FAOA,+MAMA,uHAMA,mHAMA,qHAMA,6GAzyEF,sBAo6HE,wwJAp6HF,mBAwIE,0qBAmgIA,urBA3oIF,0BAiCE,mCACE,kDA69IF,yBAl5IA,uCACE,sIASA,iCAizIF,0OAUA,sPAUA,mCACE,kDAMF,6JAOA,gUAUA,yUAWA,6RASA,8LAOA,gKAMA,iIAMA,2FAaA,uCACE,sIASA,kCA3zIJ,yBAEE,gFAMA,gFAOA,4FAMA,yFAMA,6FAOA,wFAMA,0FAOA,kFAMA,uFAMA,qFAMA,qFAMA,mFAMA,+EAMA,qFAOA,kFAMA,wFAMA,uFAOA,qFAMA,qFAMA,2FAOA,oFAMA,2FAOA,6FAMA,6FAMA,6FASA,wFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAOA,0FAMA,2FAMA,2FAMA,2FAMA,2FAMA,2FAMA,2FAMA,2FAMA,2FAMA,2FAOA,wFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAOA,wFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAOA,sFAMA,uFAMA,uFAMA,uFAMA,uFAMA,uFAMA,uFAMA,uFAMA,uFAMA,uFAOA,qFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAOA,wFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAMA,yFAOA,qFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAOA,qFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAMA,sFAOA,wFAMA,yFAMA,sFAMA,yFAOA,uFAMA,wFAMA,wFAMA,wFA8KA,0EAMA,6EAMA,+EAMA,8EAMA,+EAMA,6EAMA,gFAMA,+EAMA,gFAMA,6EAMA,gFAMA,gFAMA,iFAMA,8EAMA,gFAMA,8EAMA,8EAMA,8EAMA,8EAMA,8EAMA,8EAMA,+EAMA,+EAMA,+EAMA,+EAMA,+EAMA,+EAMA,+EAMA,+EAMA,+EAMA,+EAOA,sFAMA,wFAMA,sFAOA,gFAMA,+EAMA,8EAMA,gFAMA,8EAMA,+EAMA,+EAOA,4FAMA,6FAMA,0FAMA,oFAMA,uFAMA,2FAMA,2FAOA,oFAMA,mFAMA,kFAMA,oFAMA,kFAOA,6FAMA,oFAMA,oFAOA,8FAMA,6FAMA,0FAOA,86BAiEA,oFAMA,qFAMA,oFAMA,sFAMA,qFAMA,qFAMA,uFAMA,sFAMA,mFAMA,mFAOA,+EAMA,gFAMA,+EAMA,iFAMA,gFAMA,gFAOA,uFAMA,uFAMA,uFAMA,0FAMA,oFAOA,qFAMA,2FAMA,sFAMA,uFAMA,uFAMA,yFAMA,qFAMA,0FAMA,sFAOA,+EAMA,gFAMA,gFAMA,kFAMA,8EASA,8FAMA,6FAMA,wFAMA,2FAMA,2FAMA,2FAOA,0FAMA,2FAMA,4FAwFA,8EAMA,kFAMA,iFAMA,kFAMA,gFAMA,iFAMA,gFAMA,kFAMA,8FAOA,sFAMA,kFAMA,qFAMA,oFAMA,oFAMA,4FAOA,mFAMA,qFAOA,0FAMA,8FAOA,otBAkDA,8DAMA,6EAMA,6EAMA,yGAMA,2GAMA,4GAMA,oFAMA,sFAOA,wGAMA,+GAMA,iHAMA,8GAMA,iFAMA,mHA+BA,gDA6LA,iFAMA,sFAMA,qFAMA,sFAMA,sFAOA,4FAMA,6FAMA,2FAOA,oFAMA,iFAMA,mFAOA,mFAMA,6FAMA,uFAOA,mFAMA,wFAOA,4FAMA,0FAOA,iGAMA,gGAMA,oFA0dA,mFAMA,uFAMA,yFAMA,iFAMA,0FAOA,wFAMA,sFAMA,uFAMA,sFAMA,0FAMA,0FAMA,2FAMA,wFAOA,kFAMA,2FAMA,gFAMA,mFAMA,0FAOA,wFAMA,uFAMA,uFAMA,sFAMA,wFAMA,sFAOA,qFAMA,oFAMA,uFAOA,qFAMA,iGAMA,iGAMA,sFAOA,0FAMA,0FAOA,sFAMA,oFAMA,sFAMA,oFAMA,oFAOA,sFAMA,wFAMA,uFAOA,sFAMA,0FAMA,0FAOA,qFAMA,uFAMA,qFAMA,yFAOA,mGAMA,8FAOA,iFAMA,qFAOA,mFAMA,sFAOA,4FAMA,sFAOA,iFAMA,2FAMA,6EAMA,sFAMA,uFAMA,uFAOA,yFAMA,oFAMA,uFAMA,wFAOA,oFAMA,2FAMA,yFAMA,6FAMA,qFAMA,wFAMA,yFAMA,2FAOA,uFAMA,8FAMA,4FAMA,sFAMA,0FAMA,yFAMA,2FAMA,kGAOA,uFAMA,8FAMA,4FAMA,sFAMA,0FAMA,yFAMA,2FAMA,kGAMA,wFAOA,2FAOA,oFAMA,uFAMA,wFASA,oFAMA,4FAMA,oGAOA,qFAMA,uFAMA,mFAMA,yFAMA,0GAOA,kFAMA,0FAMA,qFAOA,2FAMA,yFAMA,2FAMA,4FAOA,0FAMA,wFAMA,0FAMA,+FAOA,qFAMA,sFAMA,sFASA,sFAMA,sFAMA,sFAMA,qFAMA,uFAMA,4FAMA,2FAMA,+FAOA,kFAMA,uFAMA,uFAOA,sFAMA,4FAMA,2FAMA,qFAMA,6FAMA,8FAOA,yFApyFF,2sNAqhDA,qBAIE,qFAMA,2FAMA,4FAMA,uFAMA,6FAMA,8FAOA,qFAMA,+FAMA,qFAMA,2FAMA,0FAOA,kFAMA,wFAMA,yFAMA,uFAMA,0FAOA,oFAMA,2FAMA,2FAMA,0FASA,uFAMA,4FAMA,2FAMA,4FAMA,4FAOA,wFAMA,wFAMA,2FAMA,4FAOA,mFAMA,wFAOA,4FAMA,0FAMA,6FASA,uFAMA,uFAOA,wFAMA,uFAOA,0FASA,yFAMA,2FAMA,wFAOA,4GAMA,2GAMA,gHASA,qFAMA,wFAMA,4FAOA,qFAMA,wFAMA,4FAOA,mFAMA,sFAMA,0FAOA,kFAMA,qFAMA,yFASA,2FAMA,gGAOA,6FAMA,+FAOA,8FAMA,iGAaF,qBACE,qZAo3BF,0mHA0dA,mCACE,q+BA4BF,0/BA8HA,iBAyBE,wHAkYA,sRAWA,kEAKA,gIAOA,yHA7MF,uzBAyBA,mCACE,q+BA4BF,0/BAoDA,ouBA0BA,08BAyBA,k8BA6PA,uBACE,udA6CA,2/CAyFA,kjEA0FA,udA6CA,udA6CA,ozDA0FA,gyDA0FA,8iEA4FA,m6DAsGA,g7CAmGA,y2CA0FA,gjDAyFA,kjEA0FA,8cA4CA,6rDA2FA,+4EA2FA","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    initial-value: 0 1px 2px 0 rgb(0 0 0 / 5%);\n\n  }\n\n  @property --shadow-md {\n    inherits: false;\n    initial-value: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);\n\n  }\n\n  @property --shadow-lg {\n    inherits: false;\n    initial-value: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);\n\n  }\n\n  @property --shadow-xl {\n    inherits: false;\n    initial-value: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);\n\n  }\n\n  @property --shadow-2xl {\n    inherits: false;\n    initial-value: 0 25px 50px -12px rgb(0 0 0 / 25%);\n\n  }\n\n  @property --shadow-inner {\n    inherits: false;\n    initial-value: inset 0 2px 4px 0 rgb(0 0 0 / 5%);\n\n  }\n\n/* Component-Specific Shadow Properties */\n  @property --shadow-card {\n    inherits: false;\n    initial-value: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%);\n\n  }\n\n  @property --shadow-modal {\n    inherits: false;\n    initial-value: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);\n\n  }\n\n  @property --shadow-dropdown {\n    inherits: false;\n    initial-value: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);\n\n  }\n\n  @property --shadow-tooltip {\n    inherits: false;\n    initial-value: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);\n\n  }\n\n  @property --shadow-button {\n    inherits: false;\n    initial-value: 0 1px 2px 0 rgb(0 0 0 / 5%);\n\n  }\n\n  @property --shadow-button-hover {\n    inherits: false;\n    initial-value: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);\n\n  }\n}\n\n/* Fallback Values für alle Shadow-Definitionen */\n:root {\n/* Base Shadow Scale */\n  --shadow-none: none;\n  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 5%);\n  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 5%);\n  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);\n  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);\n  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);\n  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 25%);\n  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 5%);\n\n/* Component Shadows */\n  --shadow-card: var(--shadow-sm);\n  --shadow-modal: var(--shadow-xl);\n  --shadow-dropdown: var(--shadow-lg);\n  --shadow-tooltip: var(--shadow-md);\n  --shadow-button: var(--shadow-xs);\n  --shadow-button-hover: var(--shadow-md);\n}\n\n/* Importierte Datei: tokens/layout.css */\n/* Clean Layout Tokens */\n@layer tokens.properties {\n  :root {\n    --container-sm: 640px;\n    --container-md: 768px;\n  }\n}\n\n\n/* Importierte Datei: tokens/transitions.css */\n/**\n* Transition Tokens\n*\n* @property definitions for smooth theme transitions and animations.\n* These properties enable smooth interpolation between theme values.\n*\n* @layer tokens\n*/\n\n@layer tokens {\n/* Transition Duration Properties */\n  @property --transition-fast {\n    inherits: true;\n    initial-value: 150ms;\n    syntax: '<time>';\n  }\n\n  @property --transition-normal {\n    inherits: true;\n    initial-value: 250ms;\n    syntax: '<time>';\n  }\n\n  @property --transition-slow {\n    inherits: true;\n    initial-value: 400ms;\n    syntax: '<time>';\n  }\n\n/* Extended Duration Properties (für Kompatibilität) */\n  @property --transition-duration-fast {\n    inherits: true;\n    initial-value: 150ms;\n    syntax: '<time>';\n  }\n\n  @property --transition-duration-normal {\n    inherits: true;\n    initial-value: 250ms;\n    syntax: '<time>';\n  }\n\n  @property --transition-duration-slow {\n    inherits: true;\n    initial-value: 400ms;\n    syntax: '<time>';\n  }\n\n/* Transition Easing Properties */\n  @property --transition-ease-out {\n    inherits: true;\n    initial-value: cubic-bezier(0, 0, 0.2, 1);\n    syntax: '<custom-ident> | ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end';\n  }\n\n  @property --transition-ease-in {\n    inherits: true;\n    initial-value: cubic-bezier(0.4, 0, 1, 1);\n    syntax: '<custom-ident> | ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end';\n  }\n\n  @property --transition-ease-in-out {\n    inherits: true;\n    initial-value: cubic-bezier(0.4, 0, 0.2, 1);\n    syntax: '<custom-ident> | ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end';\n  }\n\n/* Timing Function Aliases */\n  @property --transition-timing-ease {\n    inherits: true;\n    initial-value: cubic-bezier(0.4, 0, 0.2, 1);\n    syntax: '<custom-ident> | ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end';\n  }\n\n/* Animatable Color Properties for Theme Transitions */\n  @property --transition-bg {\n    inherits: true;\n    initial-value: #fff;\n    syntax: '<color>';\n  }\n\n  @property --transition-fg {\n    inherits: true;\n    initial-value: #1f2937;\n    syntax: '<color>';\n  }\n\n  @property --transition-border {\n    inherits: true;\n    initial-value: #e5e7eb;\n    syntax: '<color>';\n  }\n\n  @property --transition-surface {\n    inherits: true;\n    initial-value: #f9fafb;\n    syntax: '<color>';\n  }\n\n  @property --transition-accent {\n    inherits: true;\n    initial-value: #3b82f6;\n    syntax: '<color>';\n  }\n\n  @property --transition-shadow-opacity {\n    inherits: true;\n    initial-value: 0.1;\n    syntax: '<number>';\n  }\n\n/* Component-Specific Transition Properties */\n  @property --transition-colors {\n    inherits: true;\n    initial-value: background-color 250ms var(--transition-ease-out), color 250ms var(--transition-ease-out), border-color 250ms var(--transition-ease-out);\n    syntax: '*';\n  }\n\n  @property --transition-transform {\n    inherits: true;\n    initial-value: transform 200ms var(--transition-ease-out);\n    syntax: '*';\n  }\n\n  @property --transition-opacity {\n    inherits: true;\n    initial-value: opacity 200ms var(--transition-ease-out);\n    syntax: '*';\n  }\n\n  @property --transition-shadow {\n    inherits: true;\n    initial-value: box-shadow 200ms var(--transition-ease-out);\n    syntax: '*';\n  }\n\n  @property --transition-all {\n    inherits: true;\n    initial-value: all 250ms var(--transition-ease-out);\n    syntax: '*';\n  }\n}\n\n/* Fallback Values für Transition-Tokens */\n:root {\n/* Duration Tokens */\n  --transition-fast: 150ms;\n  --transition-normal: 250ms;\n  --transition-slow: 400ms;\n  --transition-duration-fast: var(--transition-fast);\n  --transition-duration-normal: var(--transition-normal);\n  --transition-duration-slow: var(--transition-slow);\n\n/* Timing Functions */\n  --transition-ease-out: ease-out;\n  --transition-ease-in: ease-in;\n  --transition-ease-in-out: ease-in-out;\n  --transition-timing-ease: var(--transition-ease-in-out);\n\n/* Combined Transition Properties */\n  --transition-colors: background-color var(--transition-normal) var(--transition-ease-out),\n  color var(--transition-normal) var(--transition-ease-out),\n  border-color var(--transition-normal) var(--transition-ease-out);\n  --transition-transform: transform 200ms var(--transition-ease-out);\n  --transition-opacity: opacity 200ms var(--transition-ease-out);\n  --transition-shadow: box-shadow 200ms var(--transition-ease-out);\n  --transition-all: all var(--transition-normal) var(--transition-ease-out);\n}\n\n/* Importierte Datei: tokens/effects.css */\n/**\n* Effects Properties with @property Definitions\n*\n* Typed CSS custom properties for visual effects using @property.\n* This enables better tooling support, autocomplete, and animation capabilities.\n*\n* @layer tokens.properties\n*/\n\n@layer tokens.properties {\n/* Shadow Properties */\n  @property --shadow-color {\n    inherits: true;\n    initial-value: rgb(0 0 0);\n    syntax: '<color>';\n  }\n\n  @property --shadow-opacity-sm {\n    inherits: true;\n    initial-value: 0.05;\n    syntax: '<number>';\n  }\n\n  @property --shadow-opacity-md {\n    inherits: true;\n    initial-value: 0.1;\n    syntax: '<number>';\n  }\n\n  @property --shadow-opacity-lg {\n    inherits: true;\n    initial-value: 0.15;\n    syntax: '<number>';\n  }\n\n  @property --shadow-opacity-xl {\n    inherits: true;\n    initial-value: 0.25;\n    syntax: '<number>';\n  }\n\n/* Transition Duration Properties */\n  @property --transition-duration-fast {\n    inherits: true;\n    initial-value: 150ms;\n    syntax: '<time>';\n  }\n\n  @property --transition-duration-normal {\n    inherits: true;\n    initial-value: 300ms;\n    syntax: '<time>';\n  }\n\n  @property --transition-duration-slow {\n    inherits: true;\n    initial-value: 500ms;\n    syntax: '<time>';\n  }\n\n/* Opacity Properties */\n  @property --opacity-disabled {\n    inherits: true;\n    initial-value: 0.5;\n    syntax: '<number>';\n  }\n\n  @property --opacity-hover {\n    inherits: true;\n    initial-value: 0.8;\n    syntax: '<number>';\n  }\n\n  @property --opacity-overlay {\n    inherits: true;\n    initial-value: 0.5;\n    syntax: '<number>';\n  }\n\n/* Backdrop Properties */\n  @property --color-backdrop {\n    inherits: true;\n    initial-value: rgb(0 0 0 / 5000%);\n    syntax: '<color>';\n  }\n\n  @property --color-tooltip-background {\n    inherits: true;\n    initial-value: rgb(0 0 0 / 8000%);\n    syntax: '<color>';\n  }\n\n  @property --color-tooltip-text {\n    inherits: true;\n    initial-value: #fff;\n    syntax: '<color>';\n  }\n\n/* Focus Properties */\n  @property --color-focus {\n    inherits: true;\n    initial-value: #4f46e5;\n    syntax: '<color>';\n  }\n\n  @property --color-focus-glow {\n    inherits: true;\n    initial-value: rgb(79 70 229 / 3000%);\n    syntax: '<color>';\n  }\n\n/* Gradient Properties */\n  @property --color-gradient-start {\n    inherits: true;\n    initial-value: #4f46e5;\n    syntax: '<color>';\n  }\n\n  @property --color-gradient-end {\n    inherits: true;\n    initial-value: #3b82f6;\n    syntax: '<color>';\n  }\n\n/* Background Effect Properties */\n  @property --color-background-subtle {\n    inherits: true;\n    initial-value: rgb(84 53 53 / 2%);\n    syntax: '<color>';\n  }\n\n  @property --color-background-muted {\n    inherits: true;\n    initial-value: rgb(0 0 0 / 5%);\n    syntax: '<color>';\n  }\n\n  @property --color-status {\n    inherits: true;\n    initial-value: #4f46e5;\n    syntax: '<color>';\n  }\n}\n\n/* Importierte Datei: tokens/themes.css */\n/**\n* Theme Tokens\n*\n* Comprehensive theme-specific tokens that extend the base design tokens.\n* These tokens provide a semantic layer for theme variants and enable\n* consistent theming across all components.\n*\n* @layer tokens.themes\n*/\n\n@layer tokens.themes {\n/* ================= THEME COLOR TOKENS ================= */\n\n/* Primary Theme Colors */\n  @property --theme-primary {\n    inherits: true;\n    initial-value: #4f46e5;\n    syntax: '<color>';\n  }\n\n  @property --theme-primary-hover {\n    inherits: true;\n    initial-value: #4338ca;\n    syntax: '<color>';\n  }\n\n  @property --theme-primary-active {\n    inherits: true;\n    initial-value: #3730a3;\n    syntax: '<color>';\n  }\n\n  @property --theme-secondary {\n    inherits: true;\n    initial-value: #7c3aed;\n    syntax: '<color>';\n  }\n\n  @property --theme-secondary-hover {\n    inherits: true;\n    initial-value: #6d28d9;\n    syntax: '<color>';\n  }\n\n  @property --theme-secondary-active {\n    inherits: true;\n    initial-value: #5b21b6;\n    syntax: '<color>';\n  }\n\n/* Theme Surface Colors */\n  @property --theme-background {\n    inherits: true;\n    initial-value: #fff;\n    syntax: '<color>';\n  }\n\n  @property --theme-background-subtle {\n    inherits: true;\n    initial-value: #f8fafc;\n    syntax: '<color>';\n  }\n\n  @property --theme-surface {\n    inherits: true;\n    initial-value: #f1f5f9;\n    syntax: '<color>';\n  }\n\n  @property --theme-surface-elevated {\n    inherits: true;\n    initial-value: #fff;\n    syntax: '<color>';\n  }\n\n  @property --theme-surface-overlay {\n    inherits: true;\n    initial-value: rgb(255 255 255 / 9000%);\n    syntax: '<color>';\n  }\n\n/* Theme Text Colors */\n  @property --theme-text {\n    inherits: true;\n    initial-value: #1e293b;\n    syntax: '<color>';\n  }\n\n  @property --theme-text-muted {\n    inherits: true;\n    initial-value: #64748b;\n    syntax: '<color>';\n  }\n\n  @property --theme-text-subtle {\n    inherits: true;\n    initial-value: #94a3b8;\n    syntax: '<color>';\n  }\n\n  @property --theme-text-inverse {\n    inherits: true;\n    initial-value: #fff;\n    syntax: '<color>';\n  }\n\n  @property --theme-text-on-primary {\n    inherits: true;\n    initial-value: #fff;\n    syntax: '<color>';\n  }\n\n/* Theme Border Colors */\n  @property --theme-border {\n    inherits: true;\n    initial-value: #e2e8f0;\n    syntax: '<color>';\n  }\n\n  @property --theme-border-strong {\n    inherits: true;\n    initial-value: #cbd5e1;\n    syntax: '<color>';\n  }\n\n  @property --theme-border-subtle {\n    inherits: true;\n    initial-value: #f1f5f9;\n    syntax: '<color>';\n  }\n\n  @property --theme-border-focus {\n    inherits: true;\n    initial-value: #4f46e5;\n    syntax: '<color>';\n  }\n\n/* ================= THEME EFFECT TOKENS ================= */\n\n/* Theme Shadows */\n  @property --theme-shadow-color {\n    inherits: true;\n    initial-value: rgb(0 0 0);\n    syntax: '<color>';\n  }\n\n  @property --theme-shadow-opacity-sm {\n    inherits: true;\n    initial-value: 0.05;\n    syntax: '<number>';\n  }\n\n  @property --theme-shadow-opacity-md {\n    inherits: true;\n    initial-value: 0.1;\n    syntax: '<number>';\n  }\n\n  @property --theme-shadow-opacity-lg {\n    inherits: true;\n    initial-value: 0.15;\n    syntax: '<number>';\n  }\n\n  @property --theme-shadow-opacity-xl {\n    inherits: true;\n    initial-value: 0.25;\n    syntax: '<number>';\n  }\n\n/* Theme Focus Effects */\n  @property --theme-focus-ring {\n    inherits: true;\n    initial-value: #4f46e5;\n    syntax: '<color>';\n  }\n\n  @property --theme-focus-glow {\n    inherits: true;\n    initial-value: rgb(79 70 229 / 3000%);\n    syntax: '<color>';\n  }\n\n  @property --theme-focus-ring-width {\n    inherits: true;\n    initial-value: 2px;\n    syntax: '<length>';\n  }\n\n  @property --theme-focus-ring-offset {\n    inherits: true;\n    initial-value: 2px;\n    syntax: '<length>';\n  }\n\n/* Theme Backdrop Effects */\n  @property --theme-backdrop {\n    inherits: true;\n    initial-value: rgb(0 0 0 / 5000%);\n    syntax: '<color>';\n  }\n\n  @property --theme-backdrop-blur {\n    inherits: true;\n    initial-value: 8px;\n    syntax: '<length>';\n  }\n\n/* Theme Gradient Colors */\n  @property --theme-gradient-start {\n    inherits: true;\n    initial-value: #4f46e5;\n    syntax: '<color>';\n  }\n\n  @property --theme-gradient-end {\n    inherits: true;\n    initial-value: #7c3aed;\n    syntax: '<color>';\n  }\n\n  @property --theme-gradient-accent {\n    inherits: true;\n    initial-value: #3b82f6;\n    syntax: '<color>';\n  }\n\n/* ================= THEME INTERACTION TOKENS ================= */\n\n/* Theme Hover States */\n  @property --theme-hover-opacity {\n    inherits: true;\n    initial-value: 0.8;\n    syntax: '<number>';\n  }\n\n  @property --theme-hover-scale {\n    inherits: true;\n    initial-value: 1.05;\n    syntax: '<number>';\n  }\n\n/* Theme Active States */\n  @property --theme-active-opacity {\n    inherits: true;\n    initial-value: 0.9;\n    syntax: '<number>';\n  }\n\n  @property --theme-active-scale {\n    inherits: true;\n    initial-value: 0.95;\n    syntax: '<number>';\n  }\n\n/* Theme Disabled States */\n  @property --theme-disabled-opacity {\n    inherits: true;\n    initial-value: 0.5;\n    syntax: '<number>';\n  }\n\n/* ================= THEME TRANSITION TOKENS ================= */\n\n/* Theme Transition Durations */\n  @property --theme-transition-fast {\n    inherits: true;\n    initial-value: 150ms;\n    syntax: '<time>';\n  }\n\n  @property --theme-transition-normal {\n    inherits: true;\n    initial-value: 250ms;\n    syntax: '<time>';\n  }\n\n  @property --theme-transition-slow {\n    inherits: true;\n    initial-value: 400ms;\n    syntax: '<time>';\n  }\n\n/* Theme Transition Easings */\n  @property --theme-ease-out {\n    inherits: true;\n    initial-value: cubic-bezier(0, 0, 0.2, 1);\n    syntax: '<custom-ident>';\n  }\n\n  @property --theme-ease-in {\n    inherits: true;\n    initial-value: cubic-bezier(0.4, 0, 1, 1);\n    syntax: '<custom-ident>';\n  }\n\n  @property --theme-ease-in-out {\n    inherits: true;\n    initial-value: cubic-bezier(0.4, 0, 0.2, 1);\n    syntax: '<custom-ident>';\n  }\n\n/* ================= THEME STATUS TOKENS ================= */\n\n/* Success Theme Colors */\n  @property --theme-success {\n    inherits: true;\n    initial-value: #10b981;\n    syntax: '<color>';\n  }\n\n  @property --theme-success-bg {\n    inherits: true;\n    initial-value: #ecfdf5;\n    syntax: '<color>';\n  }\n\n  @property --theme-success-border {\n    inherits: true;\n    initial-value: #a7f3d0;\n    syntax: '<color>';\n  }\n\n/* Warning Theme Colors */\n  @property --theme-warning {\n    inherits: true;\n    initial-value: #f59e0b;\n    syntax: '<color>';\n  }\n\n  @property --theme-warning-bg {\n    inherits: true;\n    initial-value: #fffbeb;\n    syntax: '<color>';\n  }\n\n  @property --theme-warning-border {\n    inherits: true;\n    initial-value: #fed7aa;\n    syntax: '<color>';\n  }\n\n/* Error Theme Colors */\n  @property --theme-error {\n    inherits: true;\n    initial-value: #ef4444;\n    syntax: '<color>';\n  }\n\n  @property --theme-error-bg {\n    inherits: true;\n    initial-value: #fef2f2;\n    syntax: '<color>';\n  }\n\n  @property --theme-error-border {\n    inherits: true;\n    initial-value: #fecaca;\n    syntax: '<color>';\n  }\n\n/* Info Theme Colors */\n  @property --theme-info {\n    inherits: true;\n    initial-value: #3b82f6;\n    syntax: '<color>';\n  }\n\n  @property --theme-info-bg {\n    inherits: true;\n    initial-value: #eff6ff;\n    syntax: '<color>';\n  }\n\n  @property --theme-info-border {\n    inherits: true;\n    initial-value: #bfdbfe;\n    syntax: '<color>';\n  }\n\n/* ================= THEME VARIANT TOKENS ================= */\n\n/* Light Theme Variant */\n  @property --theme-variant-light-bg {\n    inherits: true;\n    initial-value: #fff;\n    syntax: '<color>';\n  }\n\n  @property --theme-variant-light-text {\n    inherits: true;\n    initial-value: #1e293b;\n    syntax: '<color>';\n  }\n\n/* Dark Theme Variant */\n  @property --theme-variant-dark-bg {\n    inherits: true;\n    initial-value: #1e293b;\n    syntax: '<color>';\n  }\n\n  @property --theme-variant-dark-text {\n    inherits: true;\n    initial-value: #f1f5f9;\n    syntax: '<color>';\n  }\n\n/* High Contrast Theme Variant */\n  @property --theme-variant-contrast-bg {\n    inherits: true;\n    initial-value: #000;\n    syntax: '<color>';\n  }\n\n  @property --theme-variant-contrast-text {\n    inherits: true;\n    initial-value: #fff;\n    syntax: '<color>';\n  }\n}\n\n\n/* Importierte Datei: tokens/icons.css */\n/**\n* Icon Tokens\n*/\n\n@layer tokens.values {\n  :root {\n    --icon-size-xs: 0.75rem;\n    --icon-size-sm: 1rem;\n    --icon-size-md: 1.25rem;\n    --icon-size-lg: 1.5rem;\n    --icon-size-xl: 2rem;\n    --icon-size-2xl: 2.5rem;\n    --icon-size-3xl: 3rem;\n    --icon-size-relative-xs: 0.5em;\n    --icon-size-relative-sm: 0.75em;\n    --icon-size-relative-md: 1em;\n    --icon-size-relative-lg: 1.25em;\n    --icon-size-relative-xl: 1.5em;\n    --icon-size-relative-2xl: 2em;\n    --icon-animation-duration-normal: 1s;\n    --icon-animation-duration-slow: 2s;\n  }\n}\n\n\n\n/* Component-Specific Tokens */\n/* Importierte Datei: tokens/components.css */\n/**\n* Component-Specific Tokens\n*\n* Semantische Tokens für UI-Komponenten mit @property Definitionen.\n* Diese Tokens werden speziell für Komponenten verwendet und erweitern\n* die Basis-Token um komponentenspezifische Werte.\n*\n* @layer tokens.properties\n* @version 1.0.0\n* @author Dragonfly Design System\n*/\n\n@layer tokens.properties {\n/* Alert Component Tokens */\n  @property --alert-padding {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n\n  @property --alert-padding-sm {\n    inherits: true;\n    initial-value: 0.5rem;\n    syntax: '<length>';\n  }\n\n  @property --alert-padding-lg {\n    inherits: true;\n    initial-value: 1.25rem;\n    syntax: '<length>';\n  }\n\n  @property --alert-gap {\n    inherits: true;\n    initial-value: 0.75rem;\n    syntax: '<length>';\n  }\n\n  @property --alert-border-radius {\n    inherits: true;\n    initial-value: 0.5rem;\n    syntax: '<length>';\n  }\n\n/* Badge Component Tokens */\n  @property --badge-padding-xs {\n    inherits: true;\n    initial-value: 0.15rem 0.35rem;\n    syntax: '*';\n  }\n\n  @property --badge-padding-sm {\n    inherits: true;\n    initial-value: 0.2rem 0.4rem;\n    syntax: '*';\n  }\n\n  @property --badge-padding-md {\n    inherits: true;\n    initial-value: 0.25rem 0.5rem;\n    syntax: '*';\n  }\n\n  @property --badge-padding-lg {\n    inherits: true;\n    initial-value: 0.3rem 0.6rem;\n    syntax: '*';\n  }\n\n  @property --badge-min-width-xs {\n    inherits: true;\n    initial-value: 1.2rem;\n    syntax: '<length>';\n  }\n\n  @property --badge-min-width-sm {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n\n  @property --badge-min-width-md {\n    inherits: true;\n    initial-value: 1.75rem;\n    syntax: '<length>';\n  }\n\n  @property --badge-min-width-lg {\n    inherits: true;\n    initial-value: 2rem;\n    syntax: '<length>';\n  }\n\n/* Card Component Tokens */\n  @property --card-padding {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n\n  @property --card-padding-fluid {\n    inherits: true;\n    initial-value: 1.25rem;\n    syntax: '<length>';\n  }\n\n  @property --card-gap {\n    inherits: true;\n    initial-value: 0.75rem;\n    syntax: '<length>';\n  }\n\n  @property --card-grid-gap {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n\n  @property --card-grid-min-width {\n    inherits: true;\n    initial-value: 250px;\n    syntax: '<length>';\n  }\n\n/* Button Component Tokens */\n  @property --button-padding-sm {\n    inherits: true;\n    initial-value: 0.5rem 0.75rem;\n    syntax: '*';\n  }\n\n  @property --button-padding-md {\n    inherits: true;\n    initial-value: 0.75rem 1rem;\n    syntax: '*';\n  }\n\n  @property --button-padding-lg {\n    inherits: true;\n    initial-value: 1rem 1.5rem;\n    syntax: '*';\n  }\n\n  @property --button-height-sm {\n    inherits: true;\n    initial-value: 2rem;\n    syntax: '<length>';\n  }\n\n  @property --button-height-md {\n    inherits: true;\n    initial-value: 2.5rem;\n    syntax: '<length>';\n  }\n\n  @property --button-height-lg {\n    inherits: true;\n    initial-value: 3rem;\n    syntax: '<length>';\n  }\n\n/* Input Component Tokens */\n  @property --input-padding {\n    inherits: true;\n    initial-value: 0.75rem;\n    syntax: '<length>';\n  }\n\n  @property --input-height {\n    inherits: true;\n    initial-value: 2.5rem;\n    syntax: '<length>';\n  }\n\n  @property --input-border-width {\n    inherits: true;\n    initial-value: 1px;\n    syntax: '<length>';\n  }\n\n/* Modal Component Tokens */\n  @property --modal-padding {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n\n  @property --modal-header-padding {\n    inherits: true;\n    initial-value: 1.5rem 1.5rem 1rem;\n    syntax: '*';\n  }\n\n  @property --modal-footer-padding {\n    inherits: true;\n    initial-value: 1rem 1.5rem 1.5rem;\n    syntax: '*';\n  }\n\n  @property --modal-max-width {\n    inherits: true;\n    initial-value: 32rem;\n    syntax: '<length>';\n  }\n\n/* Table Component Tokens */\n  @property --table-cell-padding {\n    inherits: true;\n    initial-value: 0.75rem;\n    syntax: '<length>';\n  }\n\n  @property --table-header-padding {\n    inherits: true;\n    initial-value: 1rem 0.75rem;\n    syntax: '*';\n  }\n\n/* Avatar Component Tokens */\n  @property --avatar-size-xs {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n\n  @property --avatar-size-sm {\n    inherits: true;\n    initial-value: 2rem;\n    syntax: '<length>';\n  }\n\n  @property --avatar-size-md {\n    inherits: true;\n    initial-value: 2.5rem;\n    syntax: '<length>';\n  }\n\n  @property --avatar-size-lg {\n    inherits: true;\n    initial-value: 3rem;\n    syntax: '<length>';\n  }\n\n  @property --avatar-size-xl {\n    inherits: true;\n    initial-value: 4rem;\n    syntax: '<length>';\n  }\n\n/* Tooltip Component Tokens */\n  @property --tooltip-padding {\n    inherits: true;\n    initial-value: 0.5rem 0.75rem;\n    syntax: '*';\n  }\n\n  @property --tooltip-max-width {\n    inherits: true;\n    initial-value: 200px;\n    syntax: '<length>';\n  }\n\n  @property --tooltip-arrow-size {\n    inherits: true;\n    initial-value: 4px;\n    syntax: '<length>';\n  }\n\n/* Progress Component Tokens */\n  @property --progress-height {\n    inherits: true;\n    initial-value: 0.5rem;\n    syntax: '<length>';\n  }\n\n  @property --progress-height-sm {\n    inherits: true;\n    initial-value: 0.25rem;\n    syntax: '<length>';\n  }\n\n  @property --progress-height-lg {\n    inherits: true;\n    initial-value: 0.75rem;\n    syntax: '<length>';\n  }\n\n/* Spinner Component Tokens */\n  @property --spinner-size-sm {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n\n  @property --spinner-size-md {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n\n  @property --spinner-size-lg {\n    inherits: true;\n    initial-value: 2rem;\n    syntax: '<length>';\n  }\n\n  @property --spinner-border-width {\n    inherits: true;\n    initial-value: 2px;\n    syntax: '<length>';\n  }\n\n/* Breadcrumb Component Tokens */\n  @property --breadcrumb-separator-spacing {\n    inherits: true;\n    initial-value: 0.5rem;\n    syntax: '<length>';\n  }\n\n  @property --breadcrumb-item-padding {\n    inherits: true;\n    initial-value: 0.25rem 0.5rem;\n    syntax: '*';\n  }\n\n/* Tab Component Tokens */\n  @property --tab-padding {\n    inherits: true;\n    initial-value: 0.75rem 1rem;\n    syntax: '*';\n  }\n\n  @property --tab-border-width {\n    inherits: true;\n    initial-value: 2px;\n    syntax: '<length>';\n  }\n\n/* Drawer Component Tokens */\n  @property --drawer-width {\n    inherits: true;\n    initial-value: 20rem;\n    syntax: '<length>';\n  }\n\n  @property --drawer-padding {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n\n/* Pagination Component Tokens */\n  @property --pagination-item-size {\n    inherits: true;\n    initial-value: 2.5rem;\n    syntax: '<length>';\n  }\n\n  @property --pagination-gap {\n    inherits: true;\n    initial-value: 0.25rem;\n    syntax: '<length>';\n  }\n\n/* Navigation/Menu Component Tokens */\n  @property --nav-padding {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n\n  @property --nav-padding-compact {\n    inherits: true;\n    initial-value: 0.75rem;\n    syntax: '<length>';\n  }\n\n  @property --nav-gap {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n\n  @property --nav-gap-compact {\n    inherits: true;\n    initial-value: 0.5rem;\n    syntax: '<length>';\n  }\n\n  @property --nav-item-padding {\n    inherits: true;\n    initial-value: 0.5rem 0.75rem;\n    syntax: '*';\n  }\n\n  @property --nav-section-gap {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n\n/* Topbar specific tokens */\n  @property --topbar-min-height {\n    inherits: true;\n    initial-value: 3.5rem;\n    syntax: '<length>';\n  }\n\n  @property --topbar-z-index {\n    inherits: true;\n    initial-value: 100;\n    syntax: '<integer>';\n  }\n\n  @property --topbar-line-height {\n    inherits: true;\n    initial-value: 1.5;\n    syntax: '<number>';\n  }\n\n  @property --topbar-transition {\n    inherits: true;\n    initial-value: all 0.2s ease;\n    syntax: '*';\n  }\n\n/* Sidebar specific tokens */\n  @property --sidebar-width {\n    inherits: true;\n    initial-value: 16rem;\n    syntax: '<length>';\n  }\n\n  @property --sidebar-width-narrow {\n    inherits: true;\n    initial-value: 12rem;\n    syntax: '<length>';\n  }\n\n  @property --sidebar-width-wide {\n    inherits: true;\n    initial-value: 20rem;\n    syntax: '<length>';\n  }\n\n  @property --sidebar-width-collapsed {\n    inherits: true;\n    initial-value: 4rem;\n    syntax: '<length>';\n  }\n\n  @property --sidebar-z-index {\n    inherits: true;\n    initial-value: 200;\n    syntax: '<integer>';\n  }\n\n  @property --sidebar-line-height {\n    inherits: true;\n    initial-value: 1.5;\n    syntax: '<number>';\n  }\n\n  @property --sidebar-shadow {\n    inherits: true;\n    initial-value: 0 1px 3px 0 rgb(0 0 0 / 1000%);\n    syntax: '*';\n  }\n\n  @property --sidebar-transition {\n    inherits: true;\n    initial-value: width 0.3s ease;\n    syntax: '*';\n  }\n\n/* Mobile Navigation specific tokens */\n  @property --mobile-nav-width {\n    inherits: true;\n    initial-value: 20rem;\n    syntax: '<length>';\n  }\n\n  @property --mobile-nav-width-narrow {\n    inherits: true;\n    initial-value: 16rem;\n    syntax: '<length>';\n  }\n\n  @property --mobile-nav-width-wide {\n    inherits: true;\n    initial-value: 24rem;\n    syntax: '<length>';\n  }\n\n  @property --mobile-nav-height {\n    inherits: true;\n    initial-value: 100;\n    syntax: '<length>';\n  }\n\n  @property --mobile-nav-max-height {\n    inherits: true;\n    initial-value: 100;\n    syntax: '<length>';\n  }\n\n  @property --mobile-nav-z-index {\n    inherits: true;\n    initial-value: 1000;\n    syntax: '<integer>';\n  }\n\n  @property --mobile-nav-line-height {\n    inherits: true;\n    initial-value: 1.5;\n    syntax: '<number>';\n  }\n\n  @property --mobile-nav-transition {\n    inherits: true;\n    initial-value: transform 0.3s ease;\n    syntax: '*';\n  }\n\n/* Off-canvas specific tokens */\n  @property --off-canvas-width {\n    inherits: true;\n    initial-value: 20rem;\n    syntax: '<length>';\n  }\n\n  @property --off-canvas-width-narrow {\n    inherits: true;\n    initial-value: 16rem;\n    syntax: '<length>';\n  }\n\n  @property --off-canvas-width-wide {\n    inherits: true;\n    initial-value: 24rem;\n    syntax: '<length>';\n  }\n\n  @property --off-canvas-height {\n    inherits: true;\n    initial-value: 100;\n    syntax: '<length>';\n  }\n\n  @property --off-canvas-max-height {\n    inherits: true;\n    initial-value: 100;\n    syntax: '<length>';\n  }\n\n  @property --off-canvas-z-index {\n    inherits: true;\n    initial-value: 1000;\n    syntax: '<integer>';\n  }\n\n  @property --off-canvas-line-height {\n    inherits: true;\n    initial-value: 1.5;\n    syntax: '<number>';\n  }\n\n  @property --off-canvas-transition {\n    inherits: true;\n    initial-value: transform 0.3s ease;\n    syntax: '*';\n  }\n\n  @property --off-canvas-backdrop {\n    inherits: true;\n    initial-value: rgb(0 0 0 / 5000%);\n    syntax: '<color>';\n  }\n\n/* Breadcrumb specific tokens */\n  @property --breadcrumb-line-height {\n    inherits: true;\n    initial-value: 1.5;\n    syntax: '<number>';\n  }\n\n/* Container and Header tokens that are referenced */\n  @property --container-7xl {\n    inherits: true;\n    initial-value: 80rem;\n    syntax: '<length>';\n  }\n\n  @property --header-max-width {\n    inherits: true;\n    initial-value: 80rem;\n    syntax: '<length>';\n  }\n\n  @property --header-transition {\n    inherits: true;\n    initial-value: all 0.2s ease;\n    syntax: '*';\n  }\n\n/* Pattern Component Tokens */\n\n/* Blog Pattern Tokens */\n  @property --blog-max-width {\n    inherits: true;\n    initial-value: 65ch;\n    syntax: '<length>';\n  }\n\n  @property --blog-content-spacing {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n\n  @property --blog-card-hover-transform {\n    inherits: true;\n    initial-value: translateY(-4px);\n    syntax: '*';\n  }\n\n/* Tag Pattern Tokens */\n  @property --tag-padding-sm {\n    inherits: true;\n    initial-value: 0.25rem 0.5rem;\n    syntax: '*';\n  }\n\n  @property --tag-padding-md {\n    inherits: true;\n    initial-value: 0.375rem 0.75rem;\n    syntax: '*';\n  }\n\n  @property --tag-padding-lg {\n    inherits: true;\n    initial-value: 0.5rem 1rem;\n    syntax: '*';\n  }\n\n  @property --tag-border-radius {\n    inherits: true;\n    initial-value: 9999px;\n    syntax: '<length>';\n  }\n\n  @property --tag-transition {\n    inherits: true;\n    initial-value: background-color 150ms ease-in-out;\n    syntax: '*';\n  }\n\n/* Code Pattern Tokens */\n  @property --code-padding {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n\n  @property --code-inline-padding {\n    inherits: true;\n    initial-value: 0.25rem 0.5rem;\n    syntax: '*';\n  }\n\n  @property --code-line-height {\n    inherits: true;\n    initial-value: 1.4;\n    syntax: '<number>';\n  }\n\n/* Widget Pattern Tokens */\n  @property --widget-header-padding {\n    inherits: true;\n    initial-value: 0.75rem 1rem;\n    syntax: '*';\n  }\n\n  @property --widget-body-padding {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n\n  @property --widget-footer-padding {\n    inherits: true;\n    initial-value: 0.75rem 1rem;\n    syntax: '*';\n  }\n\n  @property --widget-action-padding {\n    inherits: true;\n    initial-value: 0.25rem 0.5rem;\n    syntax: '*';\n  }\n\n/* Skeleton Pattern Tokens */\n  @property --skeleton-height-sm {\n    inherits: true;\n    initial-value: 0.75rem;\n    syntax: '<length>';\n  }\n\n  @property --skeleton-height-md {\n    inherits: true;\n    initial-value: 1rem;\n    syntax: '<length>';\n  }\n\n  @property --skeleton-height-lg {\n    inherits: true;\n    initial-value: 1.5rem;\n    syntax: '<length>';\n  }\n\n  @property --skeleton-animation-duration {\n    inherits: true;\n    initial-value: 1.5s;\n    syntax: '<time>';\n  }\n\n/* Social Media Brand Colors */\n  @property --color-twitter {\n    inherits: true;\n    initial-value: #1DA1F2;\n    syntax: '<color>';\n  }\n\n  @property --color-facebook {\n    inherits: true;\n    initial-value: #4267B2;\n    syntax: '<color>';\n  }\n\n  @property --color-linkedin {\n    inherits: true;\n    initial-value: #0077B5;\n    syntax: '<color>';\n  }\n\n/* Region Component Tokens */\n\n/* Header Region Tokens */\n  @property --header-height-sm {\n    inherits: true;\n    initial-value: 48px;\n    syntax: '<length>';\n  }\n\n  @property --header-height-md {\n    inherits: true;\n    initial-value: 64px;\n    syntax: '<length>';\n  }\n\n  @property --header-height-lg {\n    inherits: true;\n    initial-value: 80px;\n    syntax: '<length>';\n  }\n\n  @property --header-z-index {\n    inherits: true;\n    initial-value: 1000;\n    syntax: '<integer>';\n  }\n\n  @property --header-line-height {\n    inherits: true;\n    initial-value: 1.5;\n    syntax: '<number>';\n  }\n\n  @property --header-logo-max-height {\n    inherits: true;\n    initial-value: 40px;\n    syntax: '<length>';\n  }\n\n  @property --header-hamburger-size {\n    inherits: true;\n    initial-value: 24px;\n    syntax: '<length>';\n  }\n\n  @property --header-mobile-breakpoint {\n    inherits: true;\n    initial-value: 768px;\n    syntax: '<length>';\n  }\n\n/* Footer Region Tokens */\n  @property --footer-columns {\n    inherits: true;\n    initial-value: 4;\n    syntax: '<integer>';\n  }\n\n  @property --footer-column-gap {\n    inherits: true;\n    initial-value: 2rem;\n    syntax: '<length>';\n  }\n\n  @property --footer-line-height {\n    inherits: true;\n    initial-value: 1.6;\n    syntax: '<number>';\n  }\n\n/* Main Content Region Tokens */\n  @property --main-max-width {\n    inherits: true;\n    initial-value: 1200px;\n    syntax: '<length>';\n  }\n\n  @property --main-max-width-narrow {\n    inherits: true;\n    initial-value: 800px;\n    syntax: '<length>';\n  }\n\n  @property --main-max-width-wide {\n    inherits: true;\n    initial-value: 1400px;\n    syntax: '<length>';\n  }\n\n  @property --main-line-height {\n    inherits: true;\n    initial-value: 1.6;\n    syntax: '<number>';\n  }\n\n  @property --main-mobile-breakpoint {\n    inherits: true;\n    initial-value: 768px;\n    syntax: '<length>';\n  }\n\n  @property --main-tablet-breakpoint {\n    inherits: true;\n    initial-value: 1024px;\n    syntax: '<length>';\n  }\n\n/* Sidebar Region Tokens */\n  @property --sidebar-grid-columns {\n    inherits: true;\n    initial-value: 3;\n    syntax: '<integer>';\n  }\n}\n\n/* Fallback Values for Component Tokens */\n:root {\n/* Alert */\n  --alert-padding: var(--space-4);\n  --alert-padding-sm: var(--space-2);\n  --alert-padding-lg: var(--space-5);\n  --alert-gap: var(--space-3);\n  --alert-border-radius: var(--radius-md);\n\n/* Badge */\n  --badge-padding-xs: 0.15rem 0.35rem;\n  --badge-padding-sm: 0.2rem 0.4rem;\n  --badge-padding-md: 0.25rem 0.5rem;\n  --badge-padding-lg: 0.3rem 0.6rem;\n  --badge-min-width-xs: 1.2rem;\n  --badge-min-width-sm: 1.5rem;\n  --badge-min-width-md: 1.75rem;\n  --badge-min-width-lg: 2rem;\n\n/* Card */\n  --card-padding: var(--space-4);\n  --card-padding-fluid: var(--space-5);\n  --card-gap: var(--space-3);\n  --card-grid-gap: var(--space-4);\n  --card-grid-min-width: 250px;\n\n/* Button */\n  --button-padding-sm: 0.5rem 0.75rem;\n  --button-padding-md: 0.75rem 1rem;\n  --button-padding-lg: 1rem 1.5rem;\n  --button-height-sm: 2rem;\n  --button-height-md: 2.5rem;\n  --button-height-lg: 3rem;\n\n/* Input */\n  --input-padding: var(--space-3);\n  --input-height: 2.5rem;\n  --input-border-width: 1px;\n\n/* Modal */\n  --modal-padding: var(--space-6);\n  --modal-header-padding: 1.5rem 1.5rem 1rem;\n  --modal-footer-padding: 1rem 1.5rem 1.5rem;\n  --modal-max-width: 32rem;\n\n/* Table */\n  --table-cell-padding: var(--space-3);\n  --table-header-padding: 1rem 0.75rem;\n\n/* Avatar */\n  --avatar-size-xs: 1.5rem;\n  --avatar-size-sm: 2rem;\n  --avatar-size-md: 2.5rem;\n  --avatar-size-lg: 3rem;\n  --avatar-size-xl: 4rem;\n\n/* Tooltip */\n  --tooltip-padding: 0.5rem 0.75rem;\n  --tooltip-max-width: 200px;\n  --tooltip-arrow-size: 4px;\n\n/* Progress */\n  --progress-height: 0.5rem;\n  --progress-height-sm: 0.25rem;\n  --progress-height-lg: 0.75rem;\n\n/* Spinner */\n  --spinner-size-sm: 1rem;\n  --spinner-size-md: 1.5rem;\n  --spinner-size-lg: 2rem;\n  --spinner-border-width: 2px;\n\n/* Breadcrumb */\n  --breadcrumb-separator-spacing: 0.5rem;\n  --breadcrumb-item-padding: 0.25rem 0.5rem;\n\n/* Tab */\n  --tab-padding: 0.75rem 1rem;\n  --tab-border-width: 2px;\n\n/* Drawer */\n  --drawer-width: 20rem;\n  --drawer-padding: var(--space-6);\n\n/* Pagination */\n  --pagination-item-size: 2.5rem;\n  --pagination-gap: 0.25rem;\n\n/* Pattern Components */\n\n/* Blog Pattern */\n  --blog-max-width: 65ch;\n  --blog-content-spacing: var(--space-6);\n  --blog-card-hover-transform: translateY(-4px);\n\n/* Tag Pattern */\n  --tag-padding-sm: 0.25rem 0.5rem;\n  --tag-padding-md: 0.375rem 0.75rem;\n  --tag-padding-lg: 0.5rem 1rem;\n  --tag-border-radius: 9999px;\n  --tag-transition: background-color 150ms ease-in-out;\n\n/* Code Pattern */\n  --code-padding: var(--space-4);\n  --code-inline-padding: var(--space-1) var(--space-2);\n  --code-line-height: 1.4;\n\n/* Widget Pattern */\n  --widget-header-padding: var(--space-3) var(--space-4);\n  --widget-body-padding: var(--space-4);\n  --widget-footer-padding: var(--space-3) var(--space-4);\n  --widget-action-padding: var(--space-1) var(--space-2);\n\n/* Skeleton Pattern */\n  --skeleton-height-sm: 0.75rem;\n  --skeleton-height-md: 1rem;\n  --skeleton-height-lg: 1.5rem;\n  --skeleton-animation-duration: 1.5s;\n\n/* Social Media Brand Colors */\n  --color-twitter: #1DA1F2;\n  --color-facebook: #4267B2;\n  --color-linkedin: #0077B5;\n\n/* Region Components */\n\n/* Header Region */\n  --header-height-sm: 48px;\n  --header-height-md: 64px;\n  --header-height-lg: 80px;\n  --header-z-index: 1000;\n  --header-line-height: 1.5;\n  --header-logo-max-height: 40px;\n  --header-hamburger-size: 24px;\n  --header-mobile-breakpoint: 768px;\n\n/* Footer Region */\n  --footer-columns: 4;\n  --footer-column-gap: var(--space-8);\n  --footer-line-height: 1.6;\n\n/* Main Content Region */\n  --main-max-width: 1200px;\n  --main-max-width-narrow: 800px;\n  --main-max-width-wide: 1400px;\n  --main-line-height: 1.6;\n  --main-mobile-breakpoint: 768px;\n  --main-tablet-breakpoint: 1024px;\n\n/* Sidebar Region */\n  --sidebar-grid-columns: 3;\n}\n\n\n\n/* Import semantic aliases */\n/* Importierte Datei: themes/aliases.css */\n/**\n* Semantic Alias Tokens\n*\n* This file defines semantic aliases that reference the base design tokens.\n* Components should use these aliases instead of direct token references.\n* This provides a semantic layer that can be easily themed and maintained.\n*\n* @layer themes.aliases\n*/\n\n@layer themes.aliases {\n  :root {\n/* Button Aliases */\n    --btn-bg: var(--color-primary);\n    --btn-bg-hover: var(--color-primary-600);\n    --btn-bg-active: var(--color-primary-700);\n    --btn-bg-disabled: var(--color-gray-300);\n    --btn-text: var(--color-text-inverse);\n    --btn-text-disabled: var(--color-text-muted);\n    --btn-border: var(--color-primary);\n    --btn-border-hover: var(--color-primary-600);\n    --btn-radius: var(--radius-button);\n    --btn-padding-x: var(--space-button-padding-x);\n    --btn-padding-y: var(--space-button-padding-y);\n    --btn-font-size: var(--font-size-base);\n    --btn-font-weight: var(--font-weight-medium);\n\n/* Button Secondary */\n    --btn-secondary-bg: var(--color-secondary);\n    --btn-secondary-bg-hover: var(--color-secondary-600);\n    --btn-secondary-text: var(--color-text-inverse);\n    --btn-secondary-border: var(--color-secondary);\n\n/* Button Outline */\n    --btn-outline-bg: transparent;\n    --btn-outline-bg-hover: var(--color-primary);\n    --btn-outline-text: var(--color-primary);\n    --btn-outline-text-hover: var(--color-text-inverse);\n    --btn-outline-border: var(--color-primary);\n\n/* Card Aliases */\n    --card-bg: var(--color-surface-elevated);\n    --card-bg-hover: var(--color-surface);\n    --card-border: var(--color-border);\n    --card-border-hover: var(--color-border-strong);\n    --card-radius: var(--radius-card);\n    --card-padding: var(--space-card-padding);\n    --card-shadow: 0 1px 3px 0 rgb(0 0 0 / 1000%), 0 1px 2px -1px rgb(0 0 0 / 1000%);\n    --card-shadow-hover: 0 4px 6px -1px rgb(0 0 0 / 1000%), 0 2px 4px -2px rgb(0 0 0 / 1000%);\n\n/* Form Aliases */\n    --form-bg: var(--color-surface-elevated);\n    --form-border: var(--color-border);\n    --form-border-focus: var(--color-primary);\n    --form-border-error: var(--color-error);\n    --form-text: var(--color-text);\n    --form-text-placeholder: var(--color-text-muted);\n    --form-radius: var(--radius-input);\n    --form-padding-x: var(--space-sm);\n    --form-padding-y: var(--space-sm);\n    --form-gap: var(--space-form-gap);\n    --form-font-size: var(--font-size-base);\n\n/* Form Error States */\n    --form-error-color: var(--color-error);\n    --form-error-bg: var(--color-error-50);\n    --form-error-border: var(--color-error);\n\n/* Form Success States */\n    --form-success-color: var(--color-success);\n    --form-success-bg: var(--color-success-50);\n    --form-success-border: var(--color-success);\n\n/* Navigation Aliases */\n    --nav-bg: var(--color-surface-elevated);\n    --nav-border: var(--color-border);\n    --nav-text: var(--color-text);\n    --nav-text-hover: var(--color-primary);\n    --nav-text-active: var(--color-primary);\n    --nav-link-padding-x: var(--space-md);\n    --nav-link-padding-y: var(--space-sm);\n\n/* Header Aliases */\n    --header-bg: var(--color-surface-elevated);\n    --header-border: var(--color-border);\n    --header-text: var(--color-text);\n    --header-height: 4rem;\n    --header-padding: var(--space-md);\n\n/* Footer Aliases */\n    --footer-bg: var(--color-surface);\n    --footer-border: var(--color-border);\n    --footer-text: var(--color-text-muted);\n    --footer-text-hover: var(--color-text);\n    --footer-padding: var(--space-xl);\n\n/* Modal Aliases */\n    --modal-bg: var(--color-surface-elevated);\n    --modal-overlay-bg: rgb(0 0 0 / 5000%);\n    --modal-border: var(--color-border);\n    --modal-radius: var(--radius-modal);\n    --modal-padding: var(--space-xl);\n    --modal-shadow: 0 20px 25px -5px rgb(0 0 0 / 1000%), 0 8px 10px -6px rgb(0 0 0 / 1000%);\n\n/* Badge Aliases */\n    --badge-bg: var(--color-gray-100);\n    --badge-text: var(--color-gray-800);\n    --badge-radius: var(--radius-badge);\n    --badge-padding-x: var(--space-xs);\n    --badge-padding-y: var(--space-0-5);\n    --badge-font-size: var(--font-size-xs);\n    --badge-font-weight: var(--font-weight-medium);\n\n/* Badge Primary */\n    --badge-primary-bg: var(--color-primary-100);\n    --badge-primary-text: var(--color-primary-800);\n\n/* Badge Success */\n    --badge-success-bg: var(--color-success-100);\n    --badge-success-text: var(--color-success-800);\n\n/* Badge Warning */\n    --badge-warning-bg: var(--color-warning-100);\n    --badge-warning-text: var(--color-warning-800);\n\n/* Badge Error */\n    --badge-error-bg: var(--color-error-100);\n    --badge-error-text: var(--color-error-800);\n\n/* Alert Aliases */\n    --alert-info-bg: var(--color-primary-50);\n    --alert-info-border: var(--color-primary-200);\n    --alert-info-text: var(--color-primary-800);\n    --alert-info-icon: var(--color-primary-600);\n    --alert-success-bg: var(--color-success-50);\n    --alert-success-border: var(--color-success-200);\n    --alert-success-text: var(--color-success-800);\n    --alert-success-icon: var(--color-success-600);\n    --alert-warning-bg: var(--color-warning-50);\n    --alert-warning-border: var(--color-warning-200);\n    --alert-warning-text: var(--color-warning-800);\n    --alert-warning-icon: var(--color-warning-600);\n    --alert-error-bg: var(--color-error-50);\n    --alert-error-border: var(--color-error-200);\n    --alert-error-text: var(--color-error-800);\n    --alert-error-icon: var(--color-error-600);\n\n/* Layout Aliases */\n    --layout-container-max-width: 120%0px;\n    --layout-container-padding: var(--space-container-padding);\n    --layout-section-gap: var(--space-section-gap);\n    --layout-grid-gap: var(--space-grid-gap);\n    --layout-flex-gap: var(--space-flex-gap);\n\n/* Typography Aliases */\n    --text-heading-color: var(--color-text);\n    --text-body-color: var(--color-text);\n    --text-muted-color: var(--color-text-muted);\n    --text-link-color: var(--color-primary);\n    --text-link-hover-color: var(--color-primary-600);\n\n/* Focus Aliases */\n    --focus-ring-color: var(--color-primary);\n    --focus-ring-width: 2px;\n    --focus-ring-offset: 2px;\n    --focus-ring-style: solid;\n\n/* Transition Aliases */\n    --transition-fast: 150ms ease;\n    --transition-normal: 250ms ease;\n    --transition-slow: 350ms ease;\n    --transition-colors: color 150ms ease, background-color 150ms ease, border-color 150ms ease;\n    --transition-transform: transform 150ms ease;\n    --transition-opacity: opacity 150ms ease;\n    --transition-shadow: box-shadow 150ms ease;\n  }\n}\n\n\n/* Import light/dark modes */\n/* Importierte 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/* Importierte Datei: themes/dark-mode.css */\n/**\n* Dark Mode Theme\n*\n* Dark mode definitions with [data-theme=\"dark\"] scope.\n* Only overrides base tokens, aliases remain stable.\n*\n* @layer themes.mode\n*/\n\n@layer themes.mode {\n  [data-theme=\"dark\"] {\n/* Color Scheme */\n    color-scheme: dark;\n\n/* Base Color Tokens - Only override what's needed for dark mode */\n    --color-background: #1d1f24;\n    --color-surface: #262830;\n    --color-surface-elevated: #30333c;\n    --color-text: #f3f3f5;\n    --color-text-muted: #8f96a8;\n    --color-text-inverse: #1d1f24;\n    --color-border: #4a4e5c;\n    --color-border-strong: #6c7285;\n\n/* Primary Colors - Dark Mode Values */\n    --color-primary: #4a90e2;\n    --color-primary-50: #001433;\n    --color-primary-100: #002966;\n    --color-primary-500: #4a90e2;\n    --color-primary-600: #66a3ff;\n    --color-primary-900: #e6f0ff;\n\n/* Secondary Colors - Dark Mode Values */\n    --color-secondary: #8b7cf6;\n    --color-secondary-50: #110a33;\n    --color-secondary-500: #8b7cf6;\n    --color-secondary-900: #eeeaff;\n\n/* Gray Colors - Dark Mode Values */\n    --color-gray-50: #1d1f24;\n    --color-gray-100: #262830;\n    --color-gray-500: #8f96a8;\n    --color-gray-900: #f9f9fa;\n\n/* Focus and Interactive States */\n    --color-focus: #6366f1;\n    --color-focus-glow: rgb(99 102 241 / 4000%);\n  }\n}\n\n/**\n* Dark Mode Theme\n*\n* Diese Datei definiert das Dark Mode Theme.\n* Die Farben orientieren sich an den Variablen aus colors.css.\n* Das Theme wird über die Klasse \"theme-dark-mode\" aktiviert.\n*\n* Unterstützt sowohl modernen light-dark() Syntax als auch Fallbacks für ältere Browser.\n*/\n\n/* Gemeinsame Dark Mode Variablen für Wiederverwendung */\n:root {\n  --dark-mode-text: var(--color-gray-100);\n  --dark-mode-text-muted: var(--color-gray-400);\n  --dark-mode-text-light: var(--color-gray-600);\n  --dark-mode-text-inverted: var(--color-gray-900);\n  --dark-mode-background: var(--color-gray-900);\n  --dark-mode-background-alt: var(--color-gray-800);\n\n/* Dunklerer Wert für besseren Kontrast bei elevated Elementen */\n  --dark-mode-background-elevated: var(--color-gray-780);\n  --dark-mode-background-inverted: var(--color-gray-50);\n  --dark-mode-border: var(--color-gray-700);\n  --dark-mode-border-hover: var(--color-gray-600);\n  --dark-mode-border-focus: var(--color-primary-400);\n  --dark-mode-border-error: var(--color-error-400);\n  --dark-mode-shadow-sm: rgb(0 0 0 / 2000%);\n  --dark-mode-shadow-md: rgb(0 0 0 / 3000%);\n  --dark-mode-shadow-lg: rgb(0 0 0 / 4000%);\n  --dark-mode-shadow-xl: rgb(0 0 0 / 5000%);\n  --dark-mode-focus-ring: var(--color-primary-400);\n  --dark-mode-focus-ring-offset: var(--color-gray-900);\n  --dark-mode-outline: var(--color-primary-400);\n}\n\n/* Dark Mode im Theme-Präferenz-System */\n@media (prefers-color-scheme: dark) {\n  :root[style*=\"--theme-preference:\\\"auto\\\"\"] {\n/* Auto-Modus verwendet die Systempräferenz */\n    color-scheme: dark;\n\n/* Überschreibe Light Mode Variablen mit Dark Mode Äquivalenten */\n    --color-text: var(--dark-mode-text);\n    --color-text-muted: var(--dark-mode-text-muted);\n    --color-text-light: var(--dark-mode-text-light);\n    --color-text-inverted: var(--dark-mode-text-inverted);\n    --color-background: var(--dark-mode-background);\n    --color-background-alt: var(--dark-mode-background-alt);\n    --color-background-elevated: var(--dark-mode-background-elevated);\n    --color-background-inverted: var(--dark-mode-background-inverted);\n    --color-border: var(--dark-mode-border);\n    --color-border-hover: var(--dark-mode-border-hover);\n    --color-border-focus: var(--dark-mode-border-focus);\n    --color-border-error: var(--dark-mode-border-error);\n    --color-shadow-sm: var(--dark-mode-shadow-sm);\n    --color-shadow-md: var(--dark-mode-shadow-md);\n    --color-shadow-lg: var(--dark-mode-shadow-lg);\n    --color-shadow-xl: var(--dark-mode-shadow-xl);\n    --color-focus-ring: var(--dark-mode-focus-ring);\n    --color-focus-ring-offset: var(--dark-mode-focus-ring-offset);\n    --color-outline: var(--dark-mode-outline);\n  }\n}\n\n/* Explizites Dark Mode über CSS-Variablen */\n:root[style*=\"--theme-preference:\\\"dark\\\"\"] {\n  color-scheme: dark;\n\n/* Überschreibe Light Mode Variablen mit Dark Mode Äquivalenten */\n  --color-text: var(--dark-mode-text);\n  --color-text-muted: var(--dark-mode-text-muted);\n  --color-text-light: var(--dark-mode-text-light);\n  --color-text-inverted: var(--dark-mode-text-inverted);\n  --color-background: var(--dark-mode-background);\n  --color-background-alt: var(--dark-mode-background-alt);\n  --color-background-elevated: var(--dark-mode-background-elevated);\n  --color-background-inverted: var(--dark-mode-background-inverted);\n  --color-border: var(--dark-mode-border);\n  --color-border-hover: var(--dark-mode-border-hover);\n  --color-border-focus: var(--dark-mode-border-focus);\n  --color-border-error: var(--dark-mode-border-error);\n  --color-shadow-sm: var(--dark-mode-shadow-sm);\n  --color-shadow-md: var(--dark-mode-shadow-md);\n  --color-shadow-lg: var(--dark-mode-shadow-lg);\n  --color-shadow-xl: var(--dark-mode-shadow-xl);\n  --color-focus-ring: var(--dark-mode-focus-ring);\n  --color-focus-ring-offset: var(--dark-mode-focus-ring-offset);\n  --color-outline: var(--dark-mode-outline);\n}\n\n/* Dark Mode über HTML Attribute */\nhtml[data-theme=\"dark\"] {\n  color-scheme: dark;\n\n/* Überschreibe Light Mode Variablen mit Dark Mode Äquivalenten */\n  --color-text: var(--dark-mode-text);\n  --color-text-muted: var(--dark-mode-text-muted);\n  --color-text-light: var(--dark-mode-text-light);\n  --color-text-inverted: var(--dark-mode-text-inverted);\n  --color-background: var(--dark-mode-background);\n  --color-background-alt: var(--dark-mode-background-alt);\n  --color-background-elevated: var(--dark-mode-background-elevated);\n  --color-background-inverted: var(--dark-mode-background-inverted);\n  --color-border: var(--dark-mode-border);\n  --color-border-hover: var(--dark-mode-border-hover);\n  --color-border-focus: var(--dark-mode-border-focus);\n  --color-border-error: var(--dark-mode-border-error);\n  --color-shadow-sm: var(--dark-mode-shadow-sm);\n  --color-shadow-md: var(--dark-mode-shadow-md);\n  --color-shadow-lg: var(--dark-mode-shadow-lg);\n  --color-shadow-xl: var(--dark-mode-shadow-xl);\n  --color-focus-ring: var(--dark-mode-focus-ring);\n  --color-focus-ring-offset: var(--dark-mode-focus-ring-offset);\n  --color-outline: var(--dark-mode-outline);\n}\n\n/* Light Mode Theme-Klassen-Implementierung für konsistente Schnittstelle */\n.theme-light-mode {\n  color-scheme: light;\n\n/* Grundlegende Light Mode Variablen */\n  --color-text: var(--color-gray-900);\n  --color-text-muted: var(--color-gray-600);\n  --color-text-light: var(--color-gray-400);\n  --color-text-inverted: var(--color-gray-100);\n  --color-background: white;\n  --color-background-alt: var(--color-gray-50);\n  --color-background-elevated: white;\n  --color-background-inverted: var(--color-gray-900);\n  --color-border: var(--color-gray-200);\n  --color-border-hover: var(--color-gray-300);\n  --color-border-focus: var(--color-primary-500);\n  --color-border-error: var(--color-error-500);\n  --color-shadow-sm: rgb(0 0 0 / 5%);\n  --color-shadow-md: rgb(0 0 0 / 1000%);\n  --color-shadow-lg: rgb(0 0 0 / 15%);\n  --color-shadow-xl: rgb(0 0 0 / 2000%);\n  --color-focus-ring: var(--color-primary-500);\n  --color-focus-ring-offset: white;\n  --color-outline: var(--color-primary-500);\n}\n\n/* Dark Mode Theme-Klassen-Implementierung */\n.theme-dark-mode {\n  color-scheme: dark;\n\n/* Verwendung der gemeinsamen Dark Mode Variablen */\n  --color-text: var(--dark-mode-text);\n  --color-text-muted: var(--dark-mode-text-muted);\n  --color-text-light: var(--dark-mode-text-light);\n  --color-text-inverted: var(--dark-mode-text-inverted);\n  --color-background: var(--dark-mode-background);\n  --color-background-alt: var(--dark-mode-background-alt);\n  --color-background-elevated: var(--dark-mode-background-elevated);\n  --color-background-inverted: var(--dark-mode-background-inverted);\n  --color-border: var(--dark-mode-border);\n  --color-border-hover: var(--dark-mode-border-hover);\n  --color-border-focus: var(--dark-mode-border-focus);\n  --color-border-error: var(--dark-mode-border-error);\n  --color-shadow-sm: var(--dark-mode-shadow-sm);\n  --color-shadow-md: var(--dark-mode-shadow-md);\n  --color-shadow-lg: var(--dark-mode-shadow-lg);\n  --color-shadow-xl: var(--dark-mode-shadow-xl);\n  --color-focus-ring: var(--dark-mode-focus-ring);\n  --color-focus-ring-offset: var(--dark-mode-focus-ring-offset);\n  --color-outline: var(--dark-mode-outline);\n}\n\n.theme-dark-mode.dark-mode {\n/* Verwendung der gemeinsamen Dark Mode Variablen */\n  --color-text: var(--dark-mode-text);\n  --color-text-muted: var(--dark-mode-text-muted);\n  --color-text-light: var(--dark-mode-text-light);\n  --color-text-inverted: var(--dark-mode-text-inverted);\n  --color-background: var(--dark-mode-background);\n  --color-background-alt: var(--dark-mode-background-alt);\n  --color-background-elevated: var(--dark-mode-background-elevated);\n  --color-background-inverted: var(--dark-mode-background-inverted);\n  --color-border: var(--dark-mode-border);\n  --color-border-hover: var(--dark-mode-border-hover);\n  --color-border-focus: var(--dark-mode-border-focus);\n  --color-border-error: var(--dark-mode-border-error);\n  --color-shadow-sm: var(--dark-mode-shadow-sm);\n  --color-shadow-md: var(--dark-mode-shadow-md);\n  --color-shadow-lg: var(--dark-mode-shadow-lg);\n  --color-shadow-xl: var(--dark-mode-shadow-xl);\n  --color-focus-ring: var(--dark-mode-focus-ring);\n  --color-focus-ring-offset: var(--dark-mode-focus-ring-offset);\n  --color-outline: var(--dark-mode-outline);\n}\n\n@layer utilities {\n/* Dark Mode Toggle Utilities */\n  .dark-mode-toggle {\n    align-items: center;\n    background-color: var(--color-bg-secondary);\n    border-radius: var(--border-radius-full);\n    cursor: pointer;\n    display: inline-flex;\n    justify-content: center;\n    padding: var(--space-2);\n    transition: background-color var(--transition-normal) var(--ease-in-out-cubic);\n  }\n\n  .dark-mode-toggle:hover {\n    background-color: var(--color-bg-tertiary);\n  }\n\n/* Dark Mode nur für bestimmte Container */\n  .dark-theme-container {\n    background-color: var(--color-bg-primary);\n    border-color: var(--color-border);\n    color: var(--color-text-primary);\n  }\n\n/* Inverse Farben für Hell/Dunkel-Kontrast */\n  .inverse-colors {\n    filter: invert(1) hue-rotate(180deg);\n  }\n\n/* Spezifische inverse Farben für Light Mode */\n  .light-theme .inverse-colors--light {\n    filter: invert(1) hue-rotate(180deg);\n  }\n\n/* Spezifische inverse Farben für Dark Mode */\n  .dark-theme .inverse-colors--dark {\n    filter: invert(1) hue-rotate(180deg);\n  }\n}\n\n\n/* Import theme transitions */\n/* Importierte 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\n/* Datei: themes/dark-mode.css */\n/**\n* Dark Mode Theme\n*\n* Dark mode definitions with [data-theme=\"dark\"] scope.\n* Only overrides base tokens, aliases remain stable.\n*\n* @layer themes.mode\n*/\n\n@layer themes.mode {\n  [data-theme=\"dark\"] {\n/* Color Scheme */\n    color-scheme: dark;\n\n/* Base Color Tokens - Only override what's needed for dark mode */\n    --color-background: #1d1f24;\n    --color-surface: #262830;\n    --color-surface-elevated: #30333c;\n    --color-text: #f3f3f5;\n    --color-text-muted: #8f96a8;\n    --color-text-inverse: #1d1f24;\n    --color-border: #4a4e5c;\n    --color-border-strong: #6c7285;\n\n/* Primary Colors - Dark Mode Values */\n    --color-primary: #4a90e2;\n    --color-primary-50: #001433;\n    --color-primary-100: #002966;\n    --color-primary-500: #4a90e2;\n    --color-primary-600: #66a3ff;\n    --color-primary-900: #e6f0ff;\n\n/* Secondary Colors - Dark Mode Values */\n    --color-secondary: #8b7cf6;\n    --color-secondary-50: #110a33;\n    --color-secondary-500: #8b7cf6;\n    --color-secondary-900: #eeeaff;\n\n/* Gray Colors - Dark Mode Values */\n    --color-gray-50: #1d1f24;\n    --color-gray-100: #262830;\n    --color-gray-500: #8f96a8;\n    --color-gray-900: #f9f9fa;\n\n/* Focus and Interactive States */\n    --color-focus: #6366f1;\n    --color-focus-glow: rgb(99 102 241 / 4000%);\n  }\n}\n\n/**\n* Dark Mode Theme\n*\n* Diese Datei definiert das Dark Mode Theme.\n* Die Farben orientieren sich an den Variablen aus colors.css.\n* Das Theme wird über die Klasse \"theme-dark-mode\" aktiviert.\n*\n* Unterstützt sowohl modernen light-dark() Syntax als auch Fallbacks für ältere Browser.\n*/\n\n/* Gemeinsame Dark Mode Variablen für Wiederverwendung */\n:root {\n  --dark-mode-text: var(--color-gray-100);\n  --dark-mode-text-muted: var(--color-gray-400);\n  --dark-mode-text-light: var(--color-gray-600);\n  --dark-mode-text-inverted: var(--color-gray-900);\n  --dark-mode-background: var(--color-gray-900);\n  --dark-mode-background-alt: var(--color-gray-800);\n\n/* Dunklerer Wert für besseren Kontrast bei elevated Elementen */\n  --dark-mode-background-elevated: var(--color-gray-780);\n  --dark-mode-background-inverted: var(--color-gray-50);\n  --dark-mode-border: var(--color-gray-700);\n  --dark-mode-border-hover: var(--color-gray-600);\n  --dark-mode-border-focus: var(--color-primary-400);\n  --dark-mode-border-error: var(--color-error-400);\n  --dark-mode-shadow-sm: rgb(0 0 0 / 2000%);\n  --dark-mode-shadow-md: rgb(0 0 0 / 3000%);\n  --dark-mode-shadow-lg: rgb(0 0 0 / 4000%);\n  --dark-mode-shadow-xl: rgb(0 0 0 / 5000%);\n  --dark-mode-focus-ring: var(--color-primary-400);\n  --dark-mode-focus-ring-offset: var(--color-gray-900);\n  --dark-mode-outline: var(--color-primary-400);\n}\n\n/* Dark Mode im Theme-Präferenz-System */\n@media (prefers-color-scheme: dark) {\n  :root[style*=\"--theme-preference:\\\"auto\\\"\"] {\n/* Auto-Modus verwendet die Systempräferenz */\n    color-scheme: dark;\n\n/* Überschreibe Light Mode Variablen mit Dark Mode Äquivalenten */\n    --color-text: var(--dark-mode-text);\n    --color-text-muted: var(--dark-mode-text-muted);\n    --color-text-light: var(--dark-mode-text-light);\n    --color-text-inverted: var(--dark-mode-text-inverted);\n    --color-background: var(--dark-mode-background);\n    --color-background-alt: var(--dark-mode-background-alt);\n    --color-background-elevated: var(--dark-mode-background-elevated);\n    --color-background-inverted: var(--dark-mode-background-inverted);\n    --color-border: var(--dark-mode-border);\n    --color-border-hover: var(--dark-mode-border-hover);\n    --color-border-focus: var(--dark-mode-border-focus);\n    --color-border-error: var(--dark-mode-border-error);\n    --color-shadow-sm: var(--dark-mode-shadow-sm);\n    --color-shadow-md: var(--dark-mode-shadow-md);\n    --color-shadow-lg: var(--dark-mode-shadow-lg);\n    --color-shadow-xl: var(--dark-mode-shadow-xl);\n    --color-focus-ring: var(--dark-mode-focus-ring);\n    --color-focus-ring-offset: var(--dark-mode-focus-ring-offset);\n    --color-outline: var(--dark-mode-outline);\n  }\n}\n\n/* Explizites Dark Mode über CSS-Variablen */\n:root[style*=\"--theme-preference:\\\"dark\\\"\"] {\n  color-scheme: dark;\n\n/* Überschreibe Light Mode Variablen mit Dark Mode Äquivalenten */\n  --color-text: var(--dark-mode-text);\n  --color-text-muted: var(--dark-mode-text-muted);\n  --color-text-light: var(--dark-mode-text-light);\n  --color-text-inverted: var(--dark-mode-text-inverted);\n  --color-background: var(--dark-mode-background);\n  --color-background-alt: var(--dark-mode-background-alt);\n  --color-background-elevated: var(--dark-mode-background-elevated);\n  --color-background-inverted: var(--dark-mode-background-inverted);\n  --color-border: var(--dark-mode-border);\n  --color-border-hover: var(--dark-mode-border-hover);\n  --color-border-focus: var(--dark-mode-border-focus);\n  --color-border-error: var(--dark-mode-border-error);\n  --color-shadow-sm: var(--dark-mode-shadow-sm);\n  --color-shadow-md: var(--dark-mode-shadow-md);\n  --color-shadow-lg: var(--dark-mode-shadow-lg);\n  --color-shadow-xl: var(--dark-mode-shadow-xl);\n  --color-focus-ring: var(--dark-mode-focus-ring);\n  --color-focus-ring-offset: var(--dark-mode-focus-ring-offset);\n  --color-outline: var(--dark-mode-outline);\n}\n\n/* Dark Mode über HTML Attribute */\nhtml[data-theme=\"dark\"] {\n  color-scheme: dark;\n\n/* Überschreibe Light Mode Variablen mit Dark Mode Äquivalenten */\n  --color-text: var(--dark-mode-text);\n  --color-text-muted: var(--dark-mode-text-muted);\n  --color-text-light: var(--dark-mode-text-light);\n  --color-text-inverted: var(--dark-mode-text-inverted);\n  --color-background: var(--dark-mode-background);\n  --color-background-alt: var(--dark-mode-background-alt);\n  --color-background-elevated: var(--dark-mode-background-elevated);\n  --color-background-inverted: var(--dark-mode-background-inverted);\n  --color-border: var(--dark-mode-border);\n  --color-border-hover: var(--dark-mode-border-hover);\n  --color-border-focus: var(--dark-mode-border-focus);\n  --color-border-error: var(--dark-mode-border-error);\n  --color-shadow-sm: var(--dark-mode-shadow-sm);\n  --color-shadow-md: var(--dark-mode-shadow-md);\n  --color-shadow-lg: var(--dark-mode-shadow-lg);\n  --color-shadow-xl: var(--dark-mode-shadow-xl);\n  --color-focus-ring: var(--dark-mode-focus-ring);\n  --color-focus-ring-offset: var(--dark-mode-focus-ring-offset);\n  --color-outline: var(--dark-mode-outline);\n}\n\n/* Light Mode Theme-Klassen-Implementierung für konsistente Schnittstelle */\n.theme-light-mode {\n  color-scheme: light;\n\n/* Grundlegende Light Mode Variablen */\n  --color-text: var(--color-gray-900);\n  --color-text-muted: var(--color-gray-600);\n  --color-text-light: var(--color-gray-400);\n  --color-text-inverted: var(--color-gray-100);\n  --color-background: white;\n  --color-background-alt: var(--color-gray-50);\n  --color-background-elevated: white;\n  --color-background-inverted: var(--color-gray-900);\n  --color-border: var(--color-gray-200);\n  --color-border-hover: var(--color-gray-300);\n  --color-border-focus: var(--color-primary-500);\n  --color-border-error: var(--color-error-500);\n  --color-shadow-sm: rgb(0 0 0 / 5%);\n  --color-shadow-md: rgb(0 0 0 / 1000%);\n  --color-shadow-lg: rgb(0 0 0 / 15%);\n  --color-shadow-xl: rgb(0 0 0 / 2000%);\n  --color-focus-ring: var(--color-primary-500);\n  --color-focus-ring-offset: white;\n  --color-outline: var(--color-primary-500);\n}\n\n/* Dark Mode Theme-Klassen-Implementierung */\n.theme-dark-mode {\n  color-scheme: dark;\n\n/* Verwendung der gemeinsamen Dark Mode Variablen */\n  --color-text: var(--dark-mode-text);\n  --color-text-muted: var(--dark-mode-text-muted);\n  --color-text-light: var(--dark-mode-text-light);\n  --color-text-inverted: var(--dark-mode-text-inverted);\n  --color-background: var(--dark-mode-background);\n  --color-background-alt: var(--dark-mode-background-alt);\n  --color-background-elevated: var(--dark-mode-background-elevated);\n  --color-background-inverted: var(--dark-mode-background-inverted);\n  --color-border: var(--dark-mode-border);\n  --color-border-hover: var(--dark-mode-border-hover);\n  --color-border-focus: var(--dark-mode-border-focus);\n  --color-border-error: var(--dark-mode-border-error);\n  --color-shadow-sm: var(--dark-mode-shadow-sm);\n  --color-shadow-md: var(--dark-mode-shadow-md);\n  --color-shadow-lg: var(--dark-mode-shadow-lg);\n  --color-shadow-xl: var(--dark-mode-shadow-xl);\n  --color-focus-ring: var(--dark-mode-focus-ring);\n  --color-focus-ring-offset: var(--dark-mode-focus-ring-offset);\n  --color-outline: var(--dark-mode-outline);\n}\n\n.theme-dark-mode.dark-mode {\n/* Verwendung der gemeinsamen Dark Mode Variablen */\n  --color-text: var(--dark-mode-text);\n  --color-text-muted: var(--dark-mode-text-muted);\n  --color-text-light: var(--dark-mode-text-light);\n  --color-text-inverted: var(--dark-mode-text-inverted);\n  --color-background: var(--dark-mode-background);\n  --color-background-alt: var(--dark-mode-background-alt);\n  --color-background-elevated: var(--dark-mode-background-elevated);\n  --color-background-inverted: var(--dark-mode-background-inverted);\n  --color-border: var(--dark-mode-border);\n  --color-border-hover: var(--dark-mode-border-hover);\n  --color-border-focus: var(--dark-mode-border-focus);\n  --color-border-error: var(--dark-mode-border-error);\n  --color-shadow-sm: var(--dark-mode-shadow-sm);\n  --color-shadow-md: var(--dark-mode-shadow-md);\n  --color-shadow-lg: var(--dark-mode-shadow-lg);\n  --color-shadow-xl: var(--dark-mode-shadow-xl);\n  --color-focus-ring: var(--dark-mode-focus-ring);\n  --color-focus-ring-offset: var(--dark-mode-focus-ring-offset);\n  --color-outline: var(--dark-mode-outline);\n}\n\n@layer utilities {\n/* Dark Mode Toggle Utilities */\n  .dark-mode-toggle {\n    align-items: center;\n    background-color: var(--color-bg-secondary);\n    border-radius: var(--border-radius-full);\n    cursor: pointer;\n    display: inline-flex;\n    justify-content: center;\n    padding: var(--space-2);\n    transition: background-color var(--transition-normal) var(--ease-in-out-cubic);\n  }\n\n  .dark-mode-toggle:hover {\n    background-color: var(--color-bg-tertiary);\n  }\n\n/* Dark Mode nur für bestimmte Container */\n  .dark-theme-container {\n    background-color: var(--color-bg-primary);\n    border-color: var(--color-border);\n    color: var(--color-text-primary);\n  }\n\n/* Inverse Farben für Hell/Dunkel-Kontrast */\n  .inverse-colors {\n    filter: invert(1) hue-rotate(180deg);\n  }\n\n/* Spezifische inverse Farben für Light Mode */\n  .light-theme .inverse-colors--light {\n    filter: invert(1) hue-rotate(180deg);\n  }\n\n/* Spezifische inverse Farben für Dark Mode */\n  .dark-theme .inverse-colors--dark {\n    filter: invert(1) hue-rotate(180deg);\n  }\n}\n\n/* Datei: themes/aliases.css */\n/**\n* Semantic Alias Tokens\n*\n* This file defines semantic aliases that reference the base design tokens.\n* Components should use these aliases instead of direct token references.\n* This provides a semantic layer that can be easily themed and maintained.\n*\n* @layer themes.aliases\n*/\n\n@layer themes.aliases {\n  :root {\n/* Button Aliases */\n    --btn-bg: var(--color-primary);\n    --btn-bg-hover: var(--color-primary-600);\n    --btn-bg-active: var(--color-primary-700);\n    --btn-bg-disabled: var(--color-gray-300);\n    --btn-text: var(--color-text-inverse);\n    --btn-text-disabled: var(--color-text-muted);\n    --btn-border: var(--color-primary);\n    --btn-border-hover: var(--color-primary-600);\n    --btn-radius: var(--radius-button);\n    --btn-padding-x: var(--space-button-padding-x);\n    --btn-padding-y: var(--space-button-padding-y);\n    --btn-font-size: var(--font-size-base);\n    --btn-font-weight: var(--font-weight-medium);\n\n/* Button Secondary */\n    --btn-secondary-bg: var(--color-secondary);\n    --btn-secondary-bg-hover: var(--color-secondary-600);\n    --btn-secondary-text: var(--color-text-inverse);\n    --btn-secondary-border: var(--color-secondary);\n\n/* Button Outline */\n    --btn-outline-bg: transparent;\n    --btn-outline-bg-hover: var(--color-primary);\n    --btn-outline-text: var(--color-primary);\n    --btn-outline-text-hover: var(--color-text-inverse);\n    --btn-outline-border: var(--color-primary);\n\n/* Card Aliases */\n    --card-bg: var(--color-surface-elevated);\n    --card-bg-hover: var(--color-surface);\n    --card-border: var(--color-border);\n    --card-border-hover: var(--color-border-strong);\n    --card-radius: var(--radius-card);\n    --card-padding: var(--space-card-padding);\n    --card-shadow: 0 1px 3px 0 rgb(0 0 0 / 1000%), 0 1px 2px -1px rgb(0 0 0 / 1000%);\n    --card-shadow-hover: 0 4px 6px -1px rgb(0 0 0 / 1000%), 0 2px 4px -2px rgb(0 0 0 / 1000%);\n\n/* Form Aliases */\n    --form-bg: var(--color-surface-elevated);\n    --form-border: var(--color-border);\n    --form-border-focus: var(--color-primary);\n    --form-border-error: var(--color-error);\n    --form-text: var(--color-text);\n    --form-text-placeholder: var(--color-text-muted);\n    --form-radius: var(--radius-input);\n    --form-padding-x: var(--space-sm);\n    --form-padding-y: var(--space-sm);\n    --form-gap: var(--space-form-gap);\n    --form-font-size: var(--font-size-base);\n\n/* Form Error States */\n    --form-error-color: var(--color-error);\n    --form-error-bg: var(--color-error-50);\n    --form-error-border: var(--color-error);\n\n/* Form Success States */\n    --form-success-color: var(--color-success);\n    --form-success-bg: var(--color-success-50);\n    --form-success-border: var(--color-success);\n\n/* Navigation Aliases */\n    --nav-bg: var(--color-surface-elevated);\n    --nav-border: var(--color-border);\n    --nav-text: var(--color-text);\n    --nav-text-hover: var(--color-primary);\n    --nav-text-active: var(--color-primary);\n    --nav-link-padding-x: var(--space-md);\n    --nav-link-padding-y: var(--space-sm);\n\n/* Header Aliases */\n    --header-bg: var(--color-surface-elevated);\n    --header-border: var(--color-border);\n    --header-text: var(--color-text);\n    --header-height: 4rem;\n    --header-padding: var(--space-md);\n\n/* Footer Aliases */\n    --footer-bg: var(--color-surface);\n    --footer-border: var(--color-border);\n    --footer-text: var(--color-text-muted);\n    --footer-text-hover: var(--color-text);\n    --footer-padding: var(--space-xl);\n\n/* Modal Aliases */\n    --modal-bg: var(--color-surface-elevated);\n    --modal-overlay-bg: rgb(0 0 0 / 5000%);\n    --modal-border: var(--color-border);\n    --modal-radius: var(--radius-modal);\n    --modal-padding: var(--space-xl);\n    --modal-shadow: 0 20px 25px -5px rgb(0 0 0 / 1000%), 0 8px 10px -6px rgb(0 0 0 / 1000%);\n\n/* Badge Aliases */\n    --badge-bg: var(--color-gray-100);\n    --badge-text: var(--color-gray-800);\n    --badge-radius: var(--radius-badge);\n    --badge-padding-x: var(--space-xs);\n    --badge-padding-y: var(--space-0-5);\n    --badge-font-size: var(--font-size-xs);\n    --badge-font-weight: var(--font-weight-medium);\n\n/* Badge Primary */\n    --badge-primary-bg: var(--color-primary-100);\n    --badge-primary-text: var(--color-primary-800);\n\n/* Badge Success */\n    --badge-success-bg: var(--color-success-100);\n    --badge-success-text: var(--color-success-800);\n\n/* Badge Warning */\n    --badge-warning-bg: var(--color-warning-100);\n    --badge-warning-text: var(--color-warning-800);\n\n/* Badge Error */\n    --badge-error-bg: var(--color-error-100);\n    --badge-error-text: var(--color-error-800);\n\n/* Alert Aliases */\n    --alert-info-bg: var(--color-primary-50);\n    --alert-info-border: var(--color-primary-200);\n    --alert-info-text: var(--color-primary-800);\n    --alert-info-icon: var(--color-primary-600);\n    --alert-success-bg: var(--color-success-50);\n    --alert-success-border: var(--color-success-200);\n    --alert-success-text: var(--color-success-800);\n    --alert-success-icon: var(--color-success-600);\n    --alert-warning-bg: var(--color-warning-50);\n    --alert-warning-border: var(--color-warning-200);\n    --alert-warning-text: var(--color-warning-800);\n    --alert-warning-icon: var(--color-warning-600);\n    --alert-error-bg: var(--color-error-50);\n    --alert-error-border: var(--color-error-200);\n    --alert-error-text: var(--color-error-800);\n    --alert-error-icon: var(--color-error-600);\n\n/* Layout Aliases */\n    --layout-container-max-width: 120%0px;\n    --layout-container-padding: var(--space-container-padding);\n    --layout-section-gap: var(--space-section-gap);\n    --layout-grid-gap: var(--space-grid-gap);\n    --layout-flex-gap: var(--space-flex-gap);\n\n/* Typography Aliases */\n    --text-heading-color: var(--color-text);\n    --text-body-color: var(--color-text);\n    --text-muted-color: var(--color-text-muted);\n    --text-link-color: var(--color-primary);\n    --text-link-hover-color: var(--color-primary-600);\n\n/* Focus Aliases */\n    --focus-ring-color: var(--color-primary);\n    --focus-ring-width: 2px;\n    --focus-ring-offset: 2px;\n    --focus-ring-style: solid;\n\n/* Transition Aliases */\n    --transition-fast: 150ms ease;\n    --transition-normal: 250ms ease;\n    --transition-slow: 350ms ease;\n    --transition-colors: color 150ms ease, background-color 150ms ease, border-color 150ms ease;\n    --transition-transform: transform 150ms ease;\n    --transition-opacity: opacity 150ms ease;\n    --transition-shadow: box-shadow 150ms ease;\n  }\n}\n\n/* Datei: themes/variants/winter.css */\n/**\n* Winter Theme Variant\n*\n* Standalone theme variant that can be loaded independently.\n* Uses [data-theme=\"winter\"] scope for activation.\n* CDN-compatible and opt-in via import or JS.\n*\n* @layer themes.variants\n*/\n\n@layer themes.variants {\n  [data-theme=\"winter\"] {\n/* Primary Colors */\n    --color-primary: #0891b2;\n    --color-secondary: #0284c7;\n\n/* Status Colors */\n    --color-success: #10b981;\n    --color-warning: #f59e0b;\n    --color-error: #ef4444;\n    --color-info: #06b6d4;\n\n/* Text Colors */\n    --color-text: #164e63;\n    --color-text-muted: #4b5563;\n    --color-text-inverse: #fff;\n\n/* Surface Colors */\n    --color-background: #f0f9ff;\n    --color-surface: #bae6fd;\n    --color-surface-elevated: #fff;\n\n/* Border Colors */\n    --color-border: #7dd3fc;\n    --color-border-strong: #38bdf8;\n\n/* Transition Colors for smooth animations */\n    --color-transition-primary: #0891b2;\n    --color-transition-surface: #f0f9ff;\n    --color-transition-text: #164e63;\n  }\n}\n\n\n/* Datei: themes/variants/vibrant.css */\n/**\n* Vibrant Theme Variant - Token-Based Version\n*\n* Standalone theme variant that can be loaded independently.\n* Uses [data-theme=\"vibrant\"] scope for activation.\n* CDN-compatible and opt-in via import or JS.\n*\n* @layer themes.variants\n*/\n\n@layer themes.variants {\n  [data-theme=\"vibrant\"] {\n/* Primary Colors - Vibrant electric blue/purple theme */\n    --color-primary: #3b82f6;\n    --color-secondary: #8b5cf6;\n\n/* Status Colors - Vibrant status colors */\n    --color-success: #10b981;\n    --color-warning: #f59e0b;\n    --color-error: #ef4444;\n    --color-info: #06b6d4;\n\n/* Text Colors - High contrast for vibrant theme */\n    --color-text: #1e40af;\n    --color-text-muted: var(--theme-text-muted, #4b5563);\n    --color-text-inverse: var(--theme-text-inverse, #fff);\n\n/* Surface Colors - Bright vibrant surfaces */\n    --color-background: #eff6ff;\n    --color-surface: #dbeafe;\n    --color-surface-elevated: var(--theme-surface-elevated, #fff);\n\n/* Border Colors - Vibrant borders */\n    --color-border: #93c5fd;\n    --color-border-strong: #60a5fa;\n\n/* Transition Colors for smooth animations */\n    --color-transition-primary: #3b82f6;\n    --color-transition-surface: #eff6ff;\n    --color-transition-text: #1e40af;\n\n/* Vibrant-specific theme properties */\n    --theme-vibrant-accent: #3b82f6;\n    --theme-vibrant-gradient-start: var(--theme-gradient-start, #3b82f6);\n    --theme-vibrant-gradient-end: var(--theme-gradient-end, #8b5cf6);\n\n/* Enhanced focus and interaction states */\n    --color-focus: var(--theme-focus-ring, #3b82f6);\n    --color-focus-glow: rgb(59 130 246 / 4000%);\n\n/* Enhanced shadow properties for vibrant effects */\n    --shadow-opacity-sm: 0.08;\n    --shadow-opacity-md: 0.15;\n    --shadow-opacity-lg: 0.25;\n    --shadow-opacity-xl: 0.35;\n    --shadow-color: var(--theme-shadow-color, rgb(59 130 246));\n\n/* Backdrop properties using theme backdrop tokens */\n    --color-backdrop: var(--theme-backdrop, rgb(0 0 0 / 5000%));\n    --backdrop-blur: var(--theme-backdrop-blur, 8px);\n\n/* Vibrant status background colors */\n    --color-success-bg: #ecfdf5;\n    --color-warning-bg: #fffbeb;\n    --color-error-bg: var(--theme-error-bg, #fef2f2);\n    --color-info-bg: #f0f9ff;\n\n/* Vibrant status border colors */\n    --color-success-border: #6ee7b7;\n    --color-warning-border: #fcd34d;\n    --color-error-border: #fca5a5;\n    --color-info-border: #7dd3fc;\n\n/* Enhanced interaction states for vibrant effects */\n    --hover-opacity: 0.9;\n    --hover-scale: 1.08;\n    --active-opacity: 1.0;\n    --active-scale: 0.92;\n    --disabled-opacity: var(--theme-disabled-opacity, 0.5);\n\n/* Snappy transition properties for vibrant responsiveness */\n    --transition-fast: 120ms;\n    --transition-normal: 200ms;\n    --transition-slow: 350ms;\n    --transition-ease-out: var(--theme-ease-out, cubic-bezier(0, 0, 0.2, 1));\n  }\n}\n\n/* Datei: themes/variants/sunset.css */\n/**\n* Sunset Theme Variant - Token-Based Version\n*\n* Standalone theme variant that can be loaded independently.\n* Uses [data-theme=\"sunset\"] scope for activation.\n* CDN-compatible and opt-in via import or JS.\n*\n* @layer themes.variants\n*/\n\n@layer themes.variants {\n  [data-theme=\"sunset\"] {\n/* Primary Colors - Sunset orange/red theme */\n    --color-primary: #ea580c;\n    --color-secondary: #dc2626;\n\n/* Status Colors - Using theme status tokens */\n    --color-success: var(--theme-success, #10b981);\n    --color-warning: var(--theme-warning, #f59e0b);\n    --color-error: var(--theme-error, #ef4444);\n    --color-info: var(--theme-info, #06b6d4);\n\n/* Text Colors - Sunset theme text */\n    --color-text: #7c2d12;\n    --color-text-muted: var(--theme-text-muted, #4b5563);\n    --color-text-inverse: var(--theme-text-inverse, #fff);\n\n/* Surface Colors - Sunset theme surfaces */\n    --color-background: #fff7ed;\n    --color-surface: #fed7aa;\n    --color-surface-elevated: var(--theme-surface-elevated, #fff);\n\n/* Border Colors - Sunset theme borders */\n    --color-border: #fdba74;\n    --color-border-strong: #fb923c;\n\n/* Transition Colors for smooth animations */\n    --color-transition-primary: #ea580c;\n    --color-transition-surface: #fff7ed;\n    --color-transition-text: #7c2d12;\n\n/* Sunset-specific theme properties */\n    --theme-sunset-accent: #ea580c;\n    --theme-sunset-gradient-start: var(--theme-gradient-start, #ea580c);\n    --theme-sunset-gradient-end: var(--theme-gradient-end, #dc2626);\n\n/* Focus and interaction states using theme tokens */\n    --color-focus: var(--theme-focus-ring, #ea580c);\n    --color-focus-glow: rgb(234 88 12 / 3000%);\n\n/* Shadow properties using theme shadow tokens */\n    --shadow-opacity-sm: var(--theme-shadow-opacity-sm, 0.05);\n    --shadow-opacity-md: var(--theme-shadow-opacity-md, 0.1);\n    --shadow-opacity-lg: var(--theme-shadow-opacity-lg, 0.15);\n    --shadow-opacity-xl: var(--theme-shadow-opacity-xl, 0.25);\n    --shadow-color: var(--theme-shadow-color, rgb(0 0 0));\n\n/* Backdrop properties using theme backdrop tokens */\n    --color-backdrop: var(--theme-backdrop, rgb(0 0 0 / 5000%));\n    --backdrop-blur: var(--theme-backdrop-blur, 8px);\n\n/* Status background colors using theme status tokens */\n    --color-success-bg: var(--theme-success-bg, #ecfdf5);\n    --color-warning-bg: var(--theme-warning-bg, #fffbeb);\n    --color-error-bg: var(--theme-error-bg, #fef2f2);\n    --color-info-bg: var(--theme-info-bg, #eff6ff);\n\n/* Status border colors using theme status tokens */\n    --color-success-border: var(--theme-success-border, #a7f3d0);\n    --color-warning-border: var(--theme-warning-border, #fed7aa);\n    --color-error-border: var(--theme-error-border, #fecaca);\n    --color-info-border: var(--theme-info-border, #bfdbfe);\n\n/* Interaction states using theme interaction tokens */\n    --hover-opacity: var(--theme-hover-opacity, 0.8);\n    --hover-scale: var(--theme-hover-scale, 1.05);\n    --active-opacity: var(--theme-active-opacity, 0.9);\n    --active-scale: var(--theme-active-scale, 0.95);\n    --disabled-opacity: var(--theme-disabled-opacity, 0.5);\n\n/* Transition properties using theme transition tokens */\n    --transition-fast: var(--theme-transition-fast, 150ms);\n    --transition-normal: var(--theme-transition-normal, 250ms);\n    --transition-slow: var(--theme-transition-slow, 400ms);\n    --transition-ease-out: var(--theme-ease-out, cubic-bezier(0, 0, 0.2, 1));\n  }\n}\n\n\n/* Datei: themes/variants/summer.css */\n/**\n* Summer Theme Variant\n*\n* Standalone theme variant that can be loaded independently.\n* Uses [data-theme=\"summer\"] scope for activation.\n* CDN-compatible and opt-in via import or JS.\n*\n* @layer themes.variants\n*/\n\n@layer themes.variants {\n  [data-theme=\"summer\"] {\n/* Primary Colors */\n    --color-primary: #ca8a04;\n    --color-secondary: #16a34a;\n\n/* Status Colors */\n    --color-success: #10b981;\n    --color-warning: #f59e0b;\n    --color-error: #ef4444;\n    --color-info: #06b6d4;\n\n/* Text Colors */\n    --color-text: #713f12;\n    --color-text-muted: #4b5563;\n    --color-text-inverse: #fff;\n\n/* Surface Colors */\n    --color-background: #fefce8;\n    --color-surface: #fef08a;\n    --color-surface-elevated: #fff;\n\n/* Border Colors */\n    --color-border: #facc15;\n    --color-border-strong: #eab308;\n\n/* Transition Colors for smooth animations */\n    --color-transition-primary: #ca8a04;\n    --color-transition-surface: #fefce8;\n    --color-transition-text: #713f12;\n  }\n}\n\n\n/* Datei: themes/variants/spring.css */\n/**\n* Spring Theme Variant\n*\n* Standalone theme variant that can be loaded independently.\n* Uses [data-theme=\"spring\"] scope for activation.\n* CDN-compatible and opt-in via import or JS.\n*\n* @layer themes.variants\n*/\n\n@layer themes.variants {\n  [data-theme=\"spring\"] {\n/* Primary Colors */\n    --color-primary: #16a34a;\n    --color-secondary: #059669;\n\n/* Status Colors */\n    --color-success: #10b981;\n    --color-warning: #f59e0b;\n    --color-error: #ef4444;\n    --color-info: #06b6d4;\n\n/* Text Colors */\n    --color-text: #14532d;\n    --color-text-muted: #4b5563;\n    --color-text-inverse: #fff;\n\n/* Surface Colors */\n    --color-background: #f0fdf4;\n    --color-surface: #bbf7d0;\n    --color-surface-elevated: #fff;\n\n/* Border Colors */\n    --color-border: #86efac;\n    --color-border-strong: #4ade80;\n\n/* Transition Colors for smooth animations */\n    --color-transition-primary: #16a34a;\n    --color-transition-surface: #f0fdf4;\n    --color-transition-text: #14532d;\n  }\n}\n\n\n/* Datei: themes/variants/retro.css */\n/**\n* Retro Theme Variant - Token-Based Version\n*\n* Standalone theme variant that can be loaded independently.\n* Uses [data-theme=\"retro\"] scope for activation.\n* CDN-compatible and opt-in via import or JS.\n*\n* @layer themes.variants\n*/\n\n@layer themes.variants {\n  [data-theme=\"retro\"] {\n/* Primary Colors - Retro amber/brown theme */\n    --color-primary: #d97706;\n    --color-secondary: #92400e;\n\n/* Status Colors - Retro-styled status colors */\n    --color-success: #65a30d;\n    --color-warning: #ca8a04;\n    --color-error: #dc2626;\n    --color-info: #0369a1;\n\n/* Text Colors - Retro theme text */\n    --color-text: #451a03;\n    --color-text-muted: #78716c;\n    --color-text-inverse: var(--theme-text-inverse, #fff);\n\n/* Surface Colors - Retro warm surfaces */\n    --color-background: #fefcbf;\n    --color-surface: #fef3c7;\n    --color-surface-elevated: var(--theme-surface-elevated, #fff);\n\n/* Border Colors - Retro warm borders */\n    --color-border: #fde68a;\n    --color-border-strong: #fcd34d;\n\n/* Transition Colors for smooth animations */\n    --color-transition-primary: #d97706;\n    --color-transition-surface: #fefcbf;\n    --color-transition-text: #451a03;\n\n/* Retro-specific theme properties */\n    --theme-retro-accent: #d97706;\n    --theme-retro-gradient-start: var(--theme-gradient-start, #d97706);\n    --theme-retro-gradient-end: var(--theme-gradient-end, #92400e);\n\n/* Focus and interaction states using theme tokens */\n    --color-focus: var(--theme-focus-ring, #d97706);\n    --color-focus-glow: rgb(217 119 6 / 3000%);\n\n/* Shadow properties using theme shadow tokens */\n    --shadow-opacity-sm: var(--theme-shadow-opacity-sm, 0.05);\n    --shadow-opacity-md: var(--theme-shadow-opacity-md, 0.1);\n    --shadow-opacity-lg: var(--theme-shadow-opacity-lg, 0.15);\n    --shadow-opacity-xl: var(--theme-shadow-opacity-xl, 0.25);\n    --shadow-color: var(--theme-shadow-color, rgb(69 26 3));\n\n/* Backdrop properties using theme backdrop tokens */\n    --color-backdrop: var(--theme-backdrop, rgb(0 0 0 / 5000%));\n    --backdrop-blur: var(--theme-backdrop-blur, 8px);\n\n/* Retro status background colors */\n    --color-success-bg: #f7fee7;\n    --color-warning-bg: #fffbeb;\n    --color-error-bg: var(--theme-error-bg, #fef2f2);\n    --color-info-bg: #eff6ff;\n\n/* Retro status border colors */\n    --color-success-border: #d9f99d;\n    --color-warning-border: #fed7aa;\n    --color-error-border: var(--theme-error-border, #fecaca);\n    --color-info-border: #bfdbfe;\n\n/* Interaction states using theme interaction tokens */\n    --hover-opacity: var(--theme-hover-opacity, 0.8);\n    --hover-scale: var(--theme-hover-scale, 1.05);\n    --active-opacity: var(--theme-active-opacity, 0.9);\n    --active-scale: var(--theme-active-scale, 0.95);\n    --disabled-opacity: var(--theme-disabled-opacity, 0.5);\n\n/* Transition properties using theme transition tokens */\n    --transition-fast: var(--theme-transition-fast, 150ms);\n    --transition-normal: var(--theme-transition-normal, 250ms);\n    --transition-slow: var(--theme-transition-slow, 400ms);\n    --transition-ease-out: var(--theme-ease-out, cubic-bezier(0, 0, 0.2, 1));\n  }\n}\n\n\n/* Datei: themes/variants/pastel.css */\n/**\n* Pastel Theme Variant - Token-Based Version\n*\n* Standalone theme variant that can be loaded independently.\n* Uses [data-theme=\"pastel\"] scope for activation.\n* CDN-compatible and opt-in via import or JS.\n*\n* @layer themes.variants\n*/\n\n@layer themes.variants {\n  [data-theme=\"pastel\"] {\n/* Primary Colors - Soft pastel pink/purple theme */\n    --color-primary: #ec4899;\n    --color-secondary: #a855f7;\n\n/* Status Colors - Soft pastel status colors */\n    --color-success: #34d399;\n    --color-warning: #fbbf24;\n    --color-error: #f87171;\n    --color-info: #60a5fa;\n\n/* Text Colors - Pastel theme text */\n    --color-text: #831843;\n    --color-text-muted: var(--theme-text-muted, #6b7280);\n    --color-text-inverse: var(--theme-text-inverse, #fff);\n\n/* Surface Colors - Soft pastel surfaces */\n    --color-background: #fdf2f8;\n    --color-surface: #fce7f3;\n    --color-surface-elevated: var(--theme-surface-elevated, #fff);\n\n/* Border Colors - Soft pastel borders */\n    --color-border: #f9a8d4;\n    --color-border-strong: #f472b6;\n\n/* Transition Colors for smooth animations */\n    --color-transition-primary: #ec4899;\n    --color-transition-surface: #fdf2f8;\n    --color-transition-text: #831843;\n\n/* Pastel-specific theme properties */\n    --theme-pastel-accent: #ec4899;\n    --theme-pastel-gradient-start: var(--theme-gradient-start, #ec4899);\n    --theme-pastel-gradient-end: var(--theme-gradient-end, #a855f7);\n\n/* Soft focus and interaction states */\n    --color-focus: var(--theme-focus-ring, #ec4899);\n    --color-focus-glow: rgb(236 72 153 / 3000%);\n\n/* Soft shadow properties */\n    --shadow-opacity-sm: var(--theme-shadow-opacity-sm, 0.05);\n    --shadow-opacity-md: var(--theme-shadow-opacity-md, 0.1);\n    --shadow-opacity-lg: var(--theme-shadow-opacity-lg, 0.15);\n    --shadow-opacity-xl: var(--theme-shadow-opacity-xl, 0.25);\n    --shadow-color: var(--theme-shadow-color, rgb(236 72 153));\n\n/* Backdrop properties using theme backdrop tokens */\n    --color-backdrop: var(--theme-backdrop, rgb(0 0 0 / 5000%));\n    --backdrop-blur: var(--theme-backdrop-blur, 8px);\n\n/* Pastel status background colors */\n    --color-success-bg: #ecfdf5;\n    --color-warning-bg: #fffbeb;\n    --color-error-bg: #fef2f2;\n    --color-info-bg: #eff6ff;\n\n/* Pastel status border colors */\n    --color-success-border: #a7f3d0;\n    --color-warning-border: #fed7aa;\n    --color-error-border: #fecaca;\n    --color-info-border: #bfdbfe;\n\n/* Gentle interaction states */\n    --hover-opacity: var(--theme-hover-opacity, 0.8);\n    --hover-scale: var(--theme-hover-scale, 1.05);\n    --active-opacity: var(--theme-active-opacity, 0.9);\n    --active-scale: var(--theme-active-scale, 0.95);\n    --disabled-opacity: var(--theme-disabled-opacity, 0.5);\n\n/* Smooth transition properties */\n    --transition-fast: var(--theme-transition-fast, 150ms);\n    --transition-normal: var(--theme-transition-normal, 250ms);\n    --transition-slow: var(--theme-transition-slow, 400ms);\n    --transition-ease-out: var(--theme-ease-out, cubic-bezier(0, 0, 0.2, 1));\n  }\n}\n\n\n/* Datei: themes/variants/ocean.css */\n/**\n* Ocean Theme Variant - Token-Based Version\n*\n* Standalone theme variant that can be loaded independently.\n* Uses [data-theme=\"ocean\"] scope for activation.\n* CDN-compatible and opt-in via import or JS.\n*\n* @layer themes.variants\n*/\n\n@layer themes.variants {\n  [data-theme=\"ocean\"] {\n/* Primary Colors - Ocean cyan/teal theme */\n    --color-primary: #0891b2;\n    --color-secondary: #0d9488;\n\n/* Status Colors - Using theme status tokens */\n    --color-success: var(--theme-success, #10b981);\n    --color-warning: var(--theme-warning, #f59e0b);\n    --color-error: var(--theme-error, #ef4444);\n    --color-info: var(--theme-info, #06b6d4);\n\n/* Text Colors - Ocean theme text */\n    --color-text: #134e4a;\n    --color-text-muted: var(--theme-text-muted, #4b5563);\n    --color-text-inverse: var(--theme-text-inverse, #fff);\n\n/* Surface Colors - Ocean theme surfaces */\n    --color-background: #f0fdfa;\n    --color-surface: #ccfbf1;\n    --color-surface-elevated: var(--theme-surface-elevated, #fff);\n\n/* Border Colors - Ocean theme borders */\n    --color-border: #99f6e4;\n    --color-border-strong: #5eead4;\n\n/* Transition Colors for smooth animations */\n    --color-transition-primary: #0891b2;\n    --color-transition-surface: #f0fdfa;\n    --color-transition-text: #134e4a;\n\n/* Ocean-specific theme properties */\n    --theme-ocean-accent: #0891b2;\n    --theme-ocean-gradient-start: var(--theme-gradient-start, #0891b2);\n    --theme-ocean-gradient-end: var(--theme-gradient-end, #0d9488);\n\n/* Focus and interaction states using theme tokens */\n    --color-focus: var(--theme-focus-ring, #0891b2);\n    --color-focus-glow: rgb(8 145 178 / 3000%);\n\n/* Shadow properties using theme shadow tokens */\n    --shadow-opacity-sm: var(--theme-shadow-opacity-sm, 0.05);\n    --shadow-opacity-md: var(--theme-shadow-opacity-md, 0.1);\n    --shadow-opacity-lg: var(--theme-shadow-opacity-lg, 0.15);\n    --shadow-opacity-xl: var(--theme-shadow-opacity-xl, 0.25);\n    --shadow-color: var(--theme-shadow-color, rgb(0 0 0));\n\n/* Backdrop properties using theme backdrop tokens */\n    --color-backdrop: var(--theme-backdrop, rgb(0 0 0 / 5000%));\n    --backdrop-blur: var(--theme-backdrop-blur, 8px);\n\n/* Status background colors using theme status tokens */\n    --color-success-bg: var(--theme-success-bg, #ecfdf5);\n    --color-warning-bg: var(--theme-warning-bg, #fffbeb);\n    --color-error-bg: var(--theme-error-bg, #fef2f2);\n    --color-info-bg: var(--theme-info-bg, #eff6ff);\n\n/* Status border colors using theme status tokens */\n    --color-success-border: var(--theme-success-border, #a7f3d0);\n    --color-warning-border: var(--theme-warning-border, #fed7aa);\n    --color-error-border: var(--theme-error-border, #fecaca);\n    --color-info-border: var(--theme-info-border, #bfdbfe);\n\n/* Interaction states using theme interaction tokens */\n    --hover-opacity: var(--theme-hover-opacity, 0.8);\n    --hover-scale: var(--theme-hover-scale, 1.05);\n    --active-opacity: var(--theme-active-opacity, 0.9);\n    --active-scale: var(--theme-active-scale, 0.95);\n    --disabled-opacity: var(--theme-disabled-opacity, 0.5);\n\n/* Transition properties using theme transition tokens */\n    --transition-fast: var(--theme-transition-fast, 150ms);\n    --transition-normal: var(--theme-transition-normal, 250ms);\n    --transition-slow: var(--theme-transition-slow, 400ms);\n    --transition-ease-out: var(--theme-ease-out, cubic-bezier(0, 0, 0.2, 1));\n  }\n}\n\n\n/* Datei: themes/variants/night.css */\n/**\n* Night Theme Variant - Enhanced Token-Based Version\n*\n* Standalone theme variant that can be loaded independently.\n* Uses [data-theme=\"night\"] scope for activation.\n* CDN-compatible and opt-in via import or JS.\n*\n* Enhanced with design tokens and dark-mode-specific adjustments.\n*\n* @layer themes.variants\n*/\n\n@layer themes.variants {\n  [data-theme=\"night\"] {\n/* Primary Colors - Purple/indigo for night theme */\n    --color-primary: #6366f1;\n    --color-secondary: #8b5cf6;\n\n/* Status Colors - Using theme status tokens */\n    --color-success: var(--theme-success, #10b981);\n    --color-warning: var(--theme-warning, #f59e0b);\n    --color-error: var(--theme-error, #ef4444);\n    --color-info: var(--theme-info, #06b6d4);\n\n/* Text Colors - Light text for dark backgrounds */\n    --color-text: #f9fafb;\n    --color-text-muted: #d1d5db;\n    --color-text-inverse: #1f2937;\n\n/* Surface Colors - Dark surfaces for night theme */\n    --color-background: #111827;\n    --color-surface: #1f2937;\n    --color-surface-elevated: #374151;\n\n/* Border Colors - Adapted for dark theme */\n    --color-border: #374151;\n    --color-border-strong: #4b5563;\n\n/* Transition Colors for smooth animations */\n    --color-transition-primary: #6366f1;\n    --color-transition-surface: #111827;\n    --color-transition-text: #f9fafb;\n\n/* Enhanced Night Theme Properties */\n    --theme-night-accent: #8b5cf6;\n    --theme-night-glow: rgb(139 92 246 / 3000%);\n    --theme-night-gradient-start: var(--theme-gradient-start, #6366f1);\n    --theme-night-gradient-end: var(--theme-gradient-end, #8b5cf6);\n\n/* Focus and interaction states adapted for dark theme */\n    --color-focus: #8b5cf6;\n    --color-focus-glow: rgb(139 92 246 / 4000%);\n\n/* Dark theme shadow adjustments - Higher opacity for visibility */\n    --shadow-color: var(--theme-shadow-color, rgb(0 0 0));\n    --shadow-opacity-sm: 0.3;\n    --shadow-opacity-md: 0.4;\n    --shadow-opacity-lg: 0.5;\n    --shadow-opacity-xl: 0.6;\n\n/* Backdrop for modals and overlays - Stronger for dark themes */\n    --color-backdrop: rgb(0 0 0 / 8000%);\n    --backdrop-blur: var(--theme-backdrop-blur, 8px);\n\n/* Enhanced status colors for dark backgrounds */\n    --color-success-bg: rgb(16 185 129 / 1000%);\n    --color-warning-bg: rgb(245 158 11 / 1000%);\n    --color-error-bg: rgb(239 68 68 / 1000%);\n    --color-info-bg: rgb(6 182 212 / 1000%);\n\n/* Status border colors - Brighter for dark theme visibility */\n    --color-success-border: rgb(16 185 129 / 3000%);\n    --color-warning-border: rgb(245 158 11 / 3000%);\n    --color-error-border: rgb(239 68 68 / 3000%);\n    --color-info-border: rgb(6 182 212 / 3000%);\n\n/* Interaction states using theme interaction tokens */\n    --hover-opacity: var(--theme-hover-opacity, 0.8);\n    --hover-scale: var(--theme-hover-scale, 1.05);\n    --active-opacity: var(--theme-active-opacity, 0.9);\n    --active-scale: var(--theme-active-scale, 0.95);\n    --disabled-opacity: var(--theme-disabled-opacity, 0.5);\n\n/* Transition properties using theme transition tokens */\n    --transition-fast: var(--theme-transition-fast, 150ms);\n    --transition-normal: var(--theme-transition-normal, 250ms);\n    --transition-slow: var(--theme-transition-slow, 400ms);\n    --transition-ease-out: var(--theme-ease-out, cubic-bezier(0, 0, 0.2, 1));\n    --transition-ease-in: var(--theme-ease-in, cubic-bezier(0.4, 0, 1, 1));\n    --transition-ease-in-out: var(--theme-ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));\n\n/* Focus ring adjustments for dark theme */\n    --focus-ring-width: var(--theme-focus-ring-width, 2px);\n    --focus-ring-offset: var(--theme-focus-ring-offset, 2px);\n\n/* Surface overlay for better layering in dark theme */\n    --color-surface-overlay: rgb(55 65 81 / 9000%);\n  }\n}\n\n\n/* Datei: themes/variants/neon.css */\n/**\n* Neon Theme Variant - Enhanced Token-Based Version\n*\n* Standalone theme variant that can be loaded independently.\n* Uses [data-theme=\"neon\"] scope for activation.\n* CDN-compatible and opt-in via import or JS.\n*\n* Enhanced with vibrant neon colors and glow effects.\n*\n* @layer themes.variants\n*/\n\n@layer themes.variants {\n  [data-theme=\"neon\"] {\n/* Primary Colors - Vibrant neon cyan/pink theme */\n    --color-primary: #0ff;\n    --color-secondary: #f0f;\n\n/* Status Colors - Neon-enhanced status colors */\n    --color-success: #0f0;\n    --color-warning: #ff0;\n    --color-error: #ff0040;\n    --color-info: #00bfff;\n\n/* Text Colors - High contrast for neon theme */\n    --color-text: #fff;\n    --color-text-muted: #ccc;\n    --color-text-inverse: #000;\n\n/* Surface Colors - Dark surfaces for neon glow */\n    --color-background: #0a0a0a;\n    --color-surface: #1a1a1a;\n    --color-surface-elevated: #2a2a2a;\n\n/* Border Colors - Glowing neon borders */\n    --color-border: #0ff;\n    --color-border-strong: #f0f;\n\n/* Transition Colors for smooth animations */\n    --color-transition-primary: #0ff;\n    --color-transition-surface: #0a0a0a;\n    --color-transition-text: #fff;\n\n/* Neon-specific theme properties with enhanced glow */\n    --theme-neon-accent: #0ff;\n    --theme-neon-glow: rgb(0 255 255 / 8000%);\n    --theme-neon-gradient-start: var(--theme-gradient-start, #0ff);\n    --theme-neon-gradient-end: var(--theme-gradient-end, #f0f);\n\n/* Enhanced focus and interaction states for neon theme */\n    --color-focus: #0ff;\n    --color-focus-glow: rgb(0 255 255 / 8000%);\n\n/* Enhanced shadow properties for neon glow effects */\n    --shadow-color: var(--theme-shadow-color, rgb(0 255 255));\n    --shadow-opacity-sm: 0.6;\n    --shadow-opacity-md: 0.8;\n    --shadow-opacity-lg: 1.0;\n    --shadow-opacity-xl: 1.2;\n\n/* Strong backdrop for neon theme */\n    --color-backdrop: rgb(0 0 0 / 9000%);\n    --backdrop-blur: var(--theme-backdrop-blur, 8px);\n\n/* Neon-enhanced status background colors */\n    --color-success-bg: rgb(0 255 0 / 1000%);\n    --color-warning-bg: rgb(255 255 0 / 1000%);\n    --color-error-bg: rgb(255 0 64 / 1000%);\n    --color-info-bg: rgb(0 191 255 / 1000%);\n\n/* Neon status border colors with glow */\n    --color-success-border: rgb(0 255 0 / 6000%);\n    --color-warning-border: rgb(255 255 0 / 6000%);\n    --color-error-border: rgb(255 0 64 / 6000%);\n    --color-info-border: rgb(0 191 255 / 6000%);\n\n/* Enhanced interaction states for neon effects */\n    --hover-opacity: 0.9;\n    --hover-scale: var(--theme-hover-scale, 1.05);\n    --active-opacity: 1.0;\n    --active-scale: var(--theme-active-scale, 0.95);\n    --disabled-opacity: 0.3;\n\n/* Faster transitions for responsive neon effects */\n    --transition-fast: 100ms;\n    --transition-normal: 200ms;\n    --transition-slow: 300ms;\n    --transition-ease-out: var(--theme-ease-out, cubic-bezier(0, 0, 0.2, 1));\n\n/* Neon-specific glow properties */\n    --neon-glow-blur: 10px;\n    --neon-glow-spread: 2px;\n    --neon-pulse-duration: 2s;\n\n/* Surface overlay with neon tint */\n    --color-surface-overlay: rgb(26 26 26 / 95%);\n  }\n}\n\n\n/* Datei: themes/variants/monochrome.css */\n/**\n* Monochrome Theme Variant - Token-Based Version\n*\n* Standalone theme variant that can be loaded independently.\n* Uses [data-theme=\"monochrome\"] scope for activation.\n* CDN-compatible and opt-in via import or JS.\n*\n* @layer themes.variants\n*/\n\n@layer themes.variants {\n  [data-theme=\"monochrome\"] {\n/* Primary Colors - Pure monochrome black/white theme */\n    --color-primary: #000;\n    --color-secondary: #404040;\n\n/* Status Colors - Monochrome status colors using grayscale */\n    --color-success: #404040;\n    --color-warning: #666;\n    --color-error: #000;\n    --color-info: #808080;\n\n/* Text Colors - High contrast monochrome */\n    --color-text: #000;\n    --color-text-muted: #666;\n    --color-text-inverse: #fff;\n\n/* Surface Colors - Pure monochrome surfaces */\n    --color-background: #fff;\n    --color-surface: #f5f5f5;\n    --color-surface-elevated: #fff;\n\n/* Border Colors - Monochrome borders */\n    --color-border: #ccc;\n    --color-border-strong: #999;\n\n/* Transition Colors for smooth animations */\n    --color-transition-primary: #000;\n    --color-transition-surface: #fff;\n    --color-transition-text: #000;\n\n/* Monochrome-specific theme properties */\n    --theme-monochrome-accent: #000;\n    --theme-monochrome-gradient-start: var(--theme-gradient-start, #000);\n    --theme-monochrome-gradient-end: var(--theme-gradient-end, #404040);\n\n/* High contrast focus and interaction states */\n    --color-focus: #000;\n    --color-focus-glow: rgb(0 0 0 / 3000%);\n\n/* Monochrome shadow properties */\n    --shadow-opacity-sm: 0.1;\n    --shadow-opacity-md: 0.2;\n    --shadow-opacity-lg: 0.3;\n    --shadow-opacity-xl: 0.4;\n    --shadow-color: var(--theme-shadow-color, rgb(0 0 0));\n\n/* Backdrop properties using theme backdrop tokens */\n    --color-backdrop: rgb(0 0 0 / 8000%);\n    --backdrop-blur: var(--theme-backdrop-blur, 8px);\n\n/* Monochrome status background colors */\n    --color-success-bg: #f5f5f5;\n    --color-warning-bg: #f0f0f0;\n    --color-error-bg: #eee;\n    --color-info-bg: #fafafa;\n\n/* Monochrome status border colors */\n    --color-success-border: #ccc;\n    --color-warning-border: #bbb;\n    --color-error-border: #999;\n    --color-info-border: #ddd;\n\n/* Sharp interaction states for monochrome clarity */\n    --hover-opacity: 0.7;\n    --hover-scale: 1.02;\n    --active-opacity: 0.8;\n    --active-scale: 0.98;\n    --disabled-opacity: 0.4;\n\n/* Clean transition properties */\n    --transition-fast: var(--theme-transition-fast, 150ms);\n    --transition-normal: var(--theme-transition-normal, 250ms);\n    --transition-slow: var(--theme-transition-slow, 400ms);\n    --transition-ease-out: var(--theme-ease-out, cubic-bezier(0, 0, 0.2, 1));\n  }\n}\n\n\n/* Datei: themes/variants/minimal.css */\n/**\n* Minimal Theme Variant - Token-Based Version\n*\n* Standalone theme variant that can be loaded independently.\n* Uses [data-theme=\"minimal\"] scope for activation.\n* CDN-compatible and opt-in via import or JS.\n*\n* @layer themes.variants\n*/\n\n@layer themes.variants {\n  [data-theme=\"minimal\"] {\n/* Primary Colors - Minimal grayscale theme */\n    --color-primary: #374151;\n    --color-secondary: #6b7280;\n\n/* Status Colors - Subtle status colors for minimal theme */\n    --color-success: #059669;\n    --color-warning: #d97706;\n    --color-error: #dc2626;\n    --color-info: #0369a1;\n\n/* Text Colors - Minimal theme text */\n    --color-text: #111827;\n    --color-text-muted: #6b7280;\n    --color-text-inverse: var(--theme-text-inverse, #fff);\n\n/* Surface Colors - Clean minimal surfaces */\n    --color-background: #fff;\n    --color-surface: #f9fafb;\n    --color-surface-elevated: #fff;\n\n/* Border Colors - Subtle minimal borders */\n    --color-border: #e5e7eb;\n    --color-border-strong: #d1d5db;\n\n/* Transition Colors for smooth animations */\n    --color-transition-primary: #374151;\n    --color-transition-surface: #fff;\n    --color-transition-text: #111827;\n\n/* Minimal-specific theme properties */\n    --theme-minimal-accent: #374151;\n    --theme-minimal-gradient-start: var(--theme-gradient-start, #374151);\n    --theme-minimal-gradient-end: var(--theme-gradient-end, #6b7280);\n\n/* Subtle focus and interaction states */\n    --color-focus: var(--theme-focus-ring, #374151);\n    --color-focus-glow: rgb(55 65 81 / 2000%);\n\n/* Minimal shadow properties */\n    --shadow-opacity-sm: 0.03;\n    --shadow-opacity-md: 0.05;\n    --shadow-opacity-lg: 0.08;\n    --shadow-opacity-xl: 0.12;\n    --shadow-color: var(--theme-shadow-color, rgb(0 0 0));\n\n/* Backdrop properties using theme backdrop tokens */\n    --color-backdrop: var(--theme-backdrop, rgb(0 0 0 / 5000%));\n    --backdrop-blur: var(--theme-backdrop-blur, 8px);\n\n/* Minimal status background colors */\n    --color-success-bg: #f0fdf4;\n    --color-warning-bg: #fffbeb;\n    --color-error-bg: var(--theme-error-bg, #fef2f2);\n    --color-info-bg: #eff6ff;\n\n/* Minimal status border colors */\n    --color-success-border: #d1fae5;\n    --color-warning-border: #fed7aa;\n    --color-error-border: var(--theme-error-border, #fecaca);\n    --color-info-border: #dbeafe;\n\n/* Subtle interaction states */\n    --hover-opacity: 0.7;\n    --hover-scale: 1.02;\n    --active-opacity: 0.8;\n    --active-scale: 0.98;\n    --disabled-opacity: var(--theme-disabled-opacity, 0.5);\n\n/* Smooth transition properties */\n    --transition-fast: var(--theme-transition-fast, 150ms);\n    --transition-normal: var(--theme-transition-normal, 250ms);\n    --transition-slow: var(--theme-transition-slow, 400ms);\n    --transition-ease-out: var(--theme-ease-out, cubic-bezier(0, 0, 0.2, 1));\n  }\n}\n\n/* Datei: themes/variants/forest.css */\n/**\n* Forest Theme Variant - Token-Based Version\n*\n* Standalone theme variant that can be loaded independently.\n* Uses [data-theme=\"forest\"] scope for activation.\n* CDN-compatible and opt-in via import or JS.\n*\n* @layer themes.variants\n*/\n\n@layer themes.variants {\n  [data-theme=\"forest\"] {\n/* Primary Colors - Forest green theme */\n    --color-primary: #059669;\n    --color-secondary: #0d9488;\n\n/* Status Colors - Using theme status tokens */\n    --color-success: var(--theme-success, #10b981);\n    --color-warning: var(--theme-warning, #f59e0b);\n    --color-error: var(--theme-error, #ef4444);\n    --color-info: var(--theme-info, #06b6d4);\n\n/* Text Colors - Forest theme text */\n    --color-text: #14532d;\n    --color-text-muted: var(--theme-text-muted, #4b5563);\n    --color-text-inverse: var(--theme-text-inverse, #fff);\n\n/* Surface Colors - Forest theme surfaces */\n    --color-background: #f0fdf4;\n    --color-surface: #dcfce7;\n    --color-surface-elevated: var(--theme-surface-elevated, #fff);\n\n/* Border Colors - Forest theme borders */\n    --color-border: #bbf7d0;\n    --color-border-strong: #86efac;\n\n/* Transition Colors for smooth animations */\n    --color-transition-primary: #059669;\n    --color-transition-surface: #f0fdf4;\n    --color-transition-text: #14532d;\n\n/* Forest-specific theme properties */\n    --theme-forest-accent: #059669;\n    --theme-forest-gradient-start: var(--theme-gradient-start, #059669);\n    --theme-forest-gradient-end: var(--theme-gradient-end, #0d9488);\n\n/* Focus and interaction states using theme tokens */\n    --color-focus: var(--theme-focus-ring, #059669);\n    --color-focus-glow: rgb(5 150 105 / 3000%);\n\n/* Shadow properties using theme shadow tokens */\n    --shadow-opacity-sm: var(--theme-shadow-opacity-sm, 0.05);\n    --shadow-opacity-md: var(--theme-shadow-opacity-md, 0.1);\n    --shadow-opacity-lg: var(--theme-shadow-opacity-lg, 0.15);\n    --shadow-opacity-xl: var(--theme-shadow-opacity-xl, 0.25);\n    --shadow-color: var(--theme-shadow-color, rgb(0 0 0));\n\n/* Backdrop properties using theme backdrop tokens */\n    --color-backdrop: var(--theme-backdrop, rgb(0 0 0 / 5000%));\n    --backdrop-blur: var(--theme-backdrop-blur, 8px);\n\n/* Status background colors using theme status tokens */\n    --color-success-bg: var(--theme-success-bg, #ecfdf5);\n    --color-warning-bg: var(--theme-warning-bg, #fffbeb);\n    --color-error-bg: var(--theme-error-bg, #fef2f2);\n    --color-info-bg: var(--theme-info-bg, #eff6ff);\n\n/* Status border colors using theme status tokens */\n    --color-success-border: var(--theme-success-border, #a7f3d0);\n    --color-warning-border: var(--theme-warning-border, #fed7aa);\n    --color-error-border: var(--theme-error-border, #fecaca);\n    --color-info-border: var(--theme-info-border, #bfdbfe);\n\n/* Interaction states using theme interaction tokens */\n    --hover-opacity: var(--theme-hover-opacity, 0.8);\n    --hover-scale: var(--theme-hover-scale, 1.05);\n    --active-opacity: var(--theme-active-opacity, 0.9);\n    --active-scale: var(--theme-active-scale, 0.95);\n    --disabled-opacity: var(--theme-disabled-opacity, 0.5);\n\n/* Transition properties using theme transition tokens */\n    --transition-fast: var(--theme-transition-fast, 150ms);\n    --transition-normal: var(--theme-transition-normal, 250ms);\n    --transition-slow: var(--theme-transition-slow, 400ms);\n    --transition-ease-out: var(--theme-ease-out, cubic-bezier(0, 0, 0.2, 1));\n  }\n}\n\n\n/* Datei: themes/variants/day.css */\n/**\n* Day Theme Variant\n*\n* Standalone theme variant that can be loaded independently.\n* Uses [data-theme=\"day\"] scope for activation.\n* CDN-compatible and opt-in via import or JS.\n*\n* @layer themes.variants\n*/\n\n@layer themes.variants {\n  [data-theme=\"day\"] {\n/* Primary Colors - Day indigo */\n    --color-primary: #2563eb;\n    --color-secondary: #7c3aed;\n\n/* Status Colors */\n    --color-success: #10b981;\n    --color-warning: #f59e0b;\n    --color-error: #ef4444;\n    --color-info: #06b6d4;\n\n/* Text Colors */\n    --color-text: #1f2937;\n    --color-text-muted: #6b7280;\n    --color-text-inverse: #fff;\n\n/* Surface Colors */\n    --color-background: #fff;\n    --color-surface: #f9fafb;\n    --color-surface-elevated: #fff;\n\n/* Border Colors */\n    --color-border: #e5e7eb;\n    --color-border-strong: #d1d5db;\n\n/* Transition Colors for smooth animations */\n    --color-transition-primary: #2563eb;\n    --color-transition-surface: #fff;\n    --color-transition-text: #1f2937;\n  }\n}\n\n/* Datei: themes/variants/corporate.css */\n/**\n* Corporate Theme Variant - Token-Based Version\n*\n* Standalone theme variant that can be loaded independently.\n* Uses [data-theme=\"corporate\"] scope for activation.\n* CDN-compatible and opt-in via import or JS.\n*\n* @layer themes.variants\n*/\n\n@layer themes.variants {\n  [data-theme=\"corporate\"] {\n/* Primary Colors - Professional corporate blue/navy theme */\n    --color-primary: #1e40af;\n    --color-secondary: #1e3a8a;\n\n/* Status Colors - Professional status colors */\n    --color-success: #059669;\n    --color-warning: #d97706;\n    --color-error: #dc2626;\n    --color-info: #0369a1;\n\n/* Text Colors - Professional corporate text */\n    --color-text: #1e3a8a;\n    --color-text-muted: #64748b;\n    --color-text-inverse: var(--theme-text-inverse, #fff);\n\n/* Surface Colors - Clean corporate surfaces */\n    --color-background: #f8fafc;\n    --color-surface: #f1f5f9;\n    --color-surface-elevated: #fff;\n\n/* Border Colors - Professional borders */\n    --color-border: #cbd5e1;\n    --color-border-strong: #94a3b8;\n\n/* Transition Colors for smooth animations */\n    --color-transition-primary: #1e40af;\n    --color-transition-surface: #f8fafc;\n    --color-transition-text: #1e3a8a;\n\n/* Corporate-specific theme properties */\n    --theme-corporate-accent: #1e40af;\n    --theme-corporate-gradient-start: var(--theme-gradient-start, #1e40af);\n    --theme-corporate-gradient-end: var(--theme-gradient-end, #1e3a8a);\n\n/* Professional focus and interaction states */\n    --color-focus: var(--theme-focus-ring, #1e40af);\n    --color-focus-glow: rgb(30 64 175 / 3000%);\n\n/* Conservative shadow properties */\n    --shadow-opacity-sm: var(--theme-shadow-opacity-sm, 0.05);\n    --shadow-opacity-md: var(--theme-shadow-opacity-md, 0.1);\n    --shadow-opacity-lg: var(--theme-shadow-opacity-lg, 0.15);\n    --shadow-opacity-xl: var(--theme-shadow-opacity-xl, 0.25);\n    --shadow-color: var(--theme-shadow-color, rgb(30 64 175));\n\n/* Backdrop properties using theme backdrop tokens */\n    --color-backdrop: var(--theme-backdrop, rgb(0 0 0 / 5000%));\n    --backdrop-blur: var(--theme-backdrop-blur, 8px);\n\n/* Professional status background colors */\n    --color-success-bg: #f0fdf4;\n    --color-warning-bg: #fffbeb;\n    --color-error-bg: var(--theme-error-bg, #fef2f2);\n    --color-info-bg: #eff6ff;\n\n/* Professional status border colors */\n    --color-success-border: #bbf7d0;\n    --color-warning-border: #fed7aa;\n    --color-error-border: var(--theme-error-border, #fecaca);\n    --color-info-border: #bfdbfe;\n\n/* Conservative interaction states */\n    --hover-opacity: 0.85;\n    --hover-scale: 1.02;\n    --active-opacity: 0.9;\n    --active-scale: 0.98;\n    --disabled-opacity: var(--theme-disabled-opacity, 0.5);\n\n/* Professional transition properties */\n    --transition-fast: var(--theme-transition-fast, 150ms);\n    --transition-normal: var(--theme-transition-normal, 250ms);\n    --transition-slow: var(--theme-transition-slow, 400ms);\n    --transition-ease-out: var(--theme-ease-out, cubic-bezier(0, 0, 0.2, 1));\n  }\n}\n\n/* Datei: themes/variants/brand.css */\n/**\n* Brand Theme Variant - Token-Based Version\n*\n* Standalone theme variant that can be loaded independently.\n* Uses [data-theme=\"brand\"] scope for activation.\n* CDN-compatible and opt-in via import or JS.\n*\n* Now uses design tokens from tokens/ directory for better consistency.\n*\n* @layer themes.variants\n*/\n\n@layer themes.variants {\n  [data-theme=\"brand\"] {\n/* Primary Colors - Using theme tokens with fallbacks */\n    --color-primary: var(--theme-primary, #4f46e5);\n    --color-secondary: var(--theme-secondary, #7c3aed);\n\n/* Status Colors - Using theme status tokens */\n    --color-success: var(--theme-success, #10b981);\n    --color-warning: var(--theme-warning, #f59e0b);\n    --color-error: var(--theme-error, #ef4444);\n    --color-info: var(--theme-info, #06b6d4);\n\n/* Text Colors - Using theme text tokens */\n    --color-text: var(--theme-text, #1e293b);\n    --color-text-muted: var(--theme-text-muted, #64748b);\n    --color-text-inverse: var(--theme-text-inverse, #fff);\n\n/* Surface Colors - Using theme surface tokens */\n    --color-background: var(--theme-background, #fff);\n    --color-surface: var(--theme-surface, #f8fafc);\n    --color-surface-elevated: var(--theme-surface-elevated, #fff);\n\n/* Border Colors - Using theme border tokens */\n    --color-border: var(--theme-border, #e2e8f0);\n    --color-border-strong: var(--theme-border-strong, #cbd5e1);\n\n/* Transition Colors - Using theme transition tokens */\n    --color-transition-primary: var(--color-primary);\n    --color-transition-surface: var(--color-background);\n    --color-transition-text: var(--color-text);\n\n/* Enhanced with theme-specific brand properties */\n    --theme-brand-accent: #4f46e5;\n    --theme-brand-gradient-start: var(--theme-gradient-start, #4f46e5);\n    --theme-brand-gradient-end: var(--theme-gradient-end, #7c3aed);\n\n/* Focus and interaction states using theme effect tokens */\n    --color-focus: var(--theme-focus-ring, #4f46e5);\n    --color-focus-glow: var(--theme-focus-glow, rgb(79 70 229 / 3000%));\n\n/* Shadow properties using theme shadow tokens */\n    --shadow-opacity-sm: var(--theme-shadow-opacity-sm, 0.05);\n    --shadow-opacity-md: var(--theme-shadow-opacity-md, 0.1);\n    --shadow-opacity-lg: var(--theme-shadow-opacity-lg, 0.15);\n    --shadow-opacity-xl: var(--theme-shadow-opacity-xl, 0.25);\n    --shadow-color: var(--theme-shadow-color, rgb(0 0 0));\n\n/* Backdrop properties using theme backdrop tokens */\n    --color-backdrop: var(--theme-backdrop, rgb(0 0 0 / 5000%));\n    --backdrop-blur: var(--theme-backdrop-blur, 8px);\n\n/* Interaction states using theme interaction tokens */\n    --hover-opacity: var(--theme-hover-opacity, 0.8);\n    --hover-scale: var(--theme-hover-scale, 1.05);\n    --active-opacity: var(--theme-active-opacity, 0.9);\n    --active-scale: var(--theme-active-scale, 0.95);\n    --disabled-opacity: var(--theme-disabled-opacity, 0.5);\n\n/* Transition properties using theme transition tokens */\n    --transition-fast: var(--theme-transition-fast, 150ms);\n    --transition-normal: var(--theme-transition-normal, 250ms);\n    --transition-slow: var(--theme-transition-slow, 400ms);\n    --transition-ease-out: var(--theme-ease-out, cubic-bezier(0, 0, 0.2, 1));\n    --transition-ease-in: var(--theme-ease-in, cubic-bezier(0.4, 0, 1, 1));\n    --transition-ease-in-out: var(--theme-ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));\n\n/* Status background colors using theme status tokens */\n    --color-success-bg: var(--theme-success-bg, #ecfdf5);\n    --color-warning-bg: var(--theme-warning-bg, #fffbeb);\n    --color-error-bg: var(--theme-error-bg, #fef2f2);\n    --color-info-bg: var(--theme-info-bg, #eff6ff);\n\n/* Status border colors using theme status tokens */\n    --color-success-border: var(--theme-success-border, #a7f3d0);\n    --color-warning-border: var(--theme-warning-border, #fed7aa);\n    --color-error-border: var(--theme-error-border, #fecaca);\n    --color-info-border: var(--theme-info-border, #bfdbfe);\n  }\n}\n\n/* Datei: themes/variants/autumn.css */\n/**\n* Autumn Theme Variant\n*\n* Standalone theme variant that can be loaded independently.\n* Uses [data-theme=\"autumn\"] scope for activation.\n* CDN-compatible and opt-in via import or JS.\n*\n* @layer themes.variants\n*/\n\n@layer themes.variants {\n  [data-theme=\"autumn\"] {\n/* Primary Colors */\n    --color-primary: #d97706;\n    --color-secondary: #ea580c;\n\n/* Status Colors */\n    --color-success: #10b981;\n    --color-warning: #f59e0b;\n    --color-error: #ef4444;\n    --color-info: #06b6d4;\n\n/* Text Colors */\n    --color-text: #78350f;\n    --color-text-muted: #4b5563;\n    --color-text-inverse: #fff;\n\n/* Surface Colors */\n    --color-background: #fffbeb;\n    --color-surface: #fde68a;\n    --color-surface-elevated: #fff;\n\n/* Border Colors */\n    --color-border: #fcd34d;\n    --color-border-strong: #f59e0b;\n\n/* Transition Colors for smooth animations */\n    --color-transition-primary: #d97706;\n    --color-transition-surface: #fffbeb;\n    --color-transition-text: #78350f;\n  }\n}\n\n"],"names":[]}