@casoon/dragonfly
Version:
Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.
1 lines • 169 kB
Source Map (JSON)
{"version":3,"sourceRoot":null,"mappings":"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","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