{"version":3,"sourceRoot":null,"mappings":"AAUA,yBAEE,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,4FA0qBA,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,0FAwEA,8DAMA,6EAMA,6EAMA,yGAMA,2GAMA,4GAMA,oFAMA,sFAOA,wGAMA,+GAMA,iHAMA,8GAMA,iFAMA,mHAwCA,8EAMA,kFAMA,iFAMA,kFAMA,gFAMA,iFAMA,gFAMA,kFAMA,8FAOA,sFAMA,kFAMA,qFAMA,oFAMA,oFAMA,4FAOA,mFAMA,qFAOA,0FAMA,8FAOA,8vBAyEA,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,wFAuMA,iFAMA,sFAMA,qFAMA,sFAMA,sFAOA,4FAMA,6FAMA,2FAOA,oFAMA,iFAMA,mFAOA,mFAMA,6FAMA,uFAOA,mFAMA,wFAOA,4FAMA,0FAOA,iGAMA,gGAMA,oFAsBA,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,wFA4KA,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,yFA59NF,goDA8EA,cAEE,mFAMA,qFAMA,kFAOA,4FAMA,8FAMA,2FAOA,4LAMA,2LAMA,gMAOA,gMAOA,kFAMA,qFAMA,yFAMA,0FAMA,yFAMA,6FAOA,+MAMA,uHAMA,mHAMA,qHAMA,4GAwoGA,mFAMA,qFAMA,kFAOA,4FAMA,8FAMA,2FAOA,4LAMA,2LAMA,gMAOA,gMAOA,kFAMA,qFAMA,yFAMA,0FAMA,yFAMA,6FAOA,+MAMA,uHAMA,mHAMA,qHAMA,6GA7vGF,i1BAoCA,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,gGAqgGA,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,iGAj4FF,2sNA84FA,qBACE,qZAo3BF","sources":["Users/jseidel/GitHub/dragonfly/dist/temp/tokens-temp-combined.css"],"sourcesContent":["/* 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/* 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/* 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/* 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/* 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/* 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/* 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/* 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/* 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/* 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/* 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/* 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"],"names":[]}