@casoon/dragonfly/dist/tokens.bundled.css

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.

/* Datei: tokens/typography.css */
/**
* Typography Properties with @property Definitions
*
* Typed CSS custom properties for typography using @property.
* This enables better tooling support, autocomplete, and animation capabilities.
*
* @layer tokens.properties
*/

@layer tokens.properties {
/* Font Size Properties */
  @property --font-size-xs {
    inherits: true;
    initial-value: 0.75rem;
    syntax: '<length>';
  }

  @property --font-size-sm {
    inherits: true;
    initial-value: 0.875rem;
    syntax: '<length>';
  }

  @property --font-size-base {
    inherits: true;
    initial-value: 1rem;
    syntax: '<length>';
  }

  @property --font-size-lg {
    inherits: true;
    initial-value: 1.125rem;
    syntax: '<length>';
  }

  @property --font-size-xl {
    inherits: true;
    initial-value: 1.25rem;
    syntax: '<length>';
  }

  @property --font-size-2xl {
    inherits: true;
    initial-value: 1.5rem;
    syntax: '<length>';
  }

  @property --font-size-3xl {
    inherits: true;
    initial-value: 1.875rem;
    syntax: '<length>';
  }

  @property --font-size-4xl {
    inherits: true;
    initial-value: 2.25rem;
    syntax: '<length>';
  }

  @property --font-size-5xl {
    inherits: true;
    initial-value: 3rem;
    syntax: '<length>';
  }

  @property --font-size-6xl {
    inherits: true;
    initial-value: 4rem;
    syntax: '<length>';
  }

/* Text Size Aliases (für Komponenten-Kompatibilität) */
  @property --text-xs {
    inherits: true;
    initial-value: 0.75rem;
    syntax: '<length>';
  }

  @property --text-sm {
    inherits: true;
    initial-value: 0.875rem;
    syntax: '<length>';
  }

  @property --text-base {
    inherits: true;
    initial-value: 1rem;
    syntax: '<length>';
  }

  @property --text-lg {
    inherits: true;
    initial-value: 1.125rem;
    syntax: '<length>';
  }

  @property --text-xl {
    inherits: true;
    initial-value: 1.25rem;
    syntax: '<length>';
  }

  @property --text-2xl {
    inherits: true;
    initial-value: 1.5rem;
    syntax: '<length>';
  }

/* Line Height Properties */
  @property --line-height-tight {
    inherits: true;
    initial-value: 1.25;
    syntax: '<number>';
  }

  @property --line-height-snug {
    inherits: true;
    initial-value: 1.375;
    syntax: '<number>';
  }

  @property --line-height-normal {
    inherits: true;
    initial-value: 1.5;
    syntax: '<number>';
  }

  @property --line-height-relaxed {
    inherits: true;
    initial-value: 1.625;
    syntax: '<number>';
  }

  @property --line-height-loose {
    inherits: true;
    initial-value: 2;
    syntax: '<number>';
  }

/* Font Weight Properties */
  @property --font-weight-thin {
    inherits: true;
    initial-value: 100;
    syntax: '<number>';
  }

  @property --font-weight-extralight {
    inherits: true;
    initial-value: 200;
    syntax: '<number>';
  }

  @property --font-weight-light {
    inherits: true;
    initial-value: 300;
    syntax: '<number>';
  }

  @property --font-weight-normal {
    inherits: true;
    initial-value: 400;
    syntax: '<number>';
  }

  @property --font-weight-medium {
    inherits: true;
    initial-value: 500;
    syntax: '<number>';
  }

  @property --font-weight-semibold {
    inherits: true;
    initial-value: 600;
    syntax: '<number>';
  }

  @property --font-weight-bold {
    inherits: true;
    initial-value: 700;
    syntax: '<number>';
  }

  @property --font-weight-extrabold {
    inherits: true;
    initial-value: 800;
    syntax: '<number>';
  }

  @property --font-weight-black {
    inherits: true;
    initial-value: 900;
    syntax: '<number>';
  }

/* Font Weight Aliases (für Komponenten-Kompatibilität) */
  @property --font-light {
    inherits: true;
    initial-value: 300;
    syntax: '<number>';
  }

  @property --font-normal {
    inherits: true;
    initial-value: 400;
    syntax: '<number>';
  }

  @property --font-medium {
    inherits: true;
    initial-value: 500;
    syntax: '<number>';
  }

  @property --font-semibold {
    inherits: true;
    initial-value: 600;
    syntax: '<number>';
  }

  @property --font-bold {
    inherits: true;
    initial-value: 700;
    syntax: '<number>';
  }

/* Font Family Properties - Defined only in :root for better performance */

/* Letter Spacing Properties */
  @property --letter-spacing-tighter {
    inherits: true;
    initial-value: -0.05em;
    syntax: '<length>';
  }

  @property --letter-spacing-tight {
    inherits: true;
    initial-value: -0.025em;
    syntax: '<length>';
  }

  @property --letter-spacing-normal {
    inherits: true;
    initial-value: 0;
    syntax: '<length>';
  }

  @property --letter-spacing-wide {
    inherits: true;
    initial-value: 0.025em;
    syntax: '<length>';
  }

  @property --letter-spacing-wider {
    inherits: true;
    initial-value: 0.05em;
    syntax: '<length>';
  }

  @property --letter-spacing-widest {
    inherits: true;
    initial-value: 0.1em;
    syntax: '<length>';
  }

/* Animatable Typography Properties */
  @property --font-size-transition {
    inherits: true;
    initial-value: 1rem;
    syntax: '<length>';
  }

  @property --line-height-transition {
    inherits: true;
    initial-value: 1.5;
    syntax: '<number>';
  }

  @property --letter-spacing-transition {
    inherits: true;
    initial-value: 0;
    syntax: '<length>';
  }
}

/* Initial Value Definitions */
:root {
/* Font Sizes */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 4rem;

/* Text Size Aliases */
  --text-xs: var(--font-size-xs);
  --text-sm: var(--font-size-sm);
  --text-base: var(--font-size-base);
  --text-lg: var(--font-size-lg);
  --text-xl: var(--font-size-xl);
  --text-2xl: var(--font-size-2xl);

/* Line Heights */
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;

/* Font Weights */
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

/* Font Weight Aliases */
  --font-light: var(--font-weight-light);
  --font-normal: var(--font-weight-normal);
  --font-medium: var(--font-weight-medium);
  --font-semibold: var(--font-weight-semibold);
  --font-bold: var(--font-weight-bold);

/* Font Families */
  --font-family-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;

/* Font Family Aliases (kurze Versionen für Komponenten) */
  --font-sans: var(--font-family-sans);
  --font-serif: var(--font-family-serif);
  --font-mono: var(--font-family-mono);

/* Letter Spacing */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;

/* Transition Properties */
  --font-size-transition: var(--font-size-base);
  --line-height-transition: var(--line-height-normal);
  --letter-spacing-transition: var(--letter-spacing-normal);
}

/* Datei: tokens/transitions.css */
/**
* Transition Tokens
*
* @property definitions for smooth theme transitions and animations.
* These properties enable smooth interpolation between theme values.
*
* @layer tokens
*/

@layer tokens {
/* Transition Duration Properties */
  @property --transition-fast {
    inherits: true;
    initial-value: 150ms;
    syntax: '<time>';
  }

  @property --transition-normal {
    inherits: true;
    initial-value: 250ms;
    syntax: '<time>';
  }

  @property --transition-slow {
    inherits: true;
    initial-value: 400ms;
    syntax: '<time>';
  }

/* Extended Duration Properties (für Kompatibilität) */
  @property --transition-duration-fast {
    inherits: true;
    initial-value: 150ms;
    syntax: '<time>';
  }

  @property --transition-duration-normal {
    inherits: true;
    initial-value: 250ms;
    syntax: '<time>';
  }

  @property --transition-duration-slow {
    inherits: true;
    initial-value: 400ms;
    syntax: '<time>';
  }

/* Transition Easing Properties */
  @property --transition-ease-out {
    inherits: true;
    initial-value: cubic-bezier(0, 0, 0.2, 1);
    syntax: '<custom-ident> | ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end';
  }

  @property --transition-ease-in {
    inherits: true;
    initial-value: cubic-bezier(0.4, 0, 1, 1);
    syntax: '<custom-ident> | ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end';
  }

  @property --transition-ease-in-out {
    inherits: true;
    initial-value: cubic-bezier(0.4, 0, 0.2, 1);
    syntax: '<custom-ident> | ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end';
  }

/* Timing Function Aliases */
  @property --transition-timing-ease {
    inherits: true;
    initial-value: cubic-bezier(0.4, 0, 0.2, 1);
    syntax: '<custom-ident> | ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end';
  }

/* Animatable Color Properties for Theme Transitions */
  @property --transition-bg {
    inherits: true;
    initial-value: #fff;
    syntax: '<color>';
  }

  @property --transition-fg {
    inherits: true;
    initial-value: #1f2937;
    syntax: '<color>';
  }

  @property --transition-border {
    inherits: true;
    initial-value: #e5e7eb;
    syntax: '<color>';
  }

  @property --transition-surface {
    inherits: true;
    initial-value: #f9fafb;
    syntax: '<color>';
  }

  @property --transition-accent {
    inherits: true;
    initial-value: #3b82f6;
    syntax: '<color>';
  }

  @property --transition-shadow-opacity {
    inherits: true;
    initial-value: 0.1;
    syntax: '<number>';
  }

/* Component-Specific Transition Properties */
  @property --transition-colors {
    inherits: true;
    initial-value: background-color 250ms var(--transition-ease-out), color 250ms var(--transition-ease-out), border-color 250ms var(--transition-ease-out);
    syntax: '*';
  }

  @property --transition-transform {
    inherits: true;
    initial-value: transform 200ms var(--transition-ease-out);
    syntax: '*';
  }

  @property --transition-opacity {
    inherits: true;
    initial-value: opacity 200ms var(--transition-ease-out);
    syntax: '*';
  }

  @property --transition-shadow {
    inherits: true;
    initial-value: box-shadow 200ms var(--transition-ease-out);
    syntax: '*';
  }

  @property --transition-all {
    inherits: true;
    initial-value: all 250ms var(--transition-ease-out);
    syntax: '*';
  }
}

/* Fallback Values für Transition-Tokens */
:root {
/* Duration Tokens */
  --transition-fast: 150ms;
  --transition-normal: 250ms;
  --transition-slow: 400ms;
  --transition-duration-fast: var(--transition-fast);
  --transition-duration-normal: var(--transition-normal);
  --transition-duration-slow: var(--transition-slow);

/* Timing Functions */
  --transition-ease-out: ease-out;
  --transition-ease-in: ease-in;
  --transition-ease-in-out: ease-in-out;
  --transition-timing-ease: var(--transition-ease-in-out);

/* Combined Transition Properties */
  --transition-colors: background-color var(--transition-normal) var(--transition-ease-out),
  color var(--transition-normal) var(--transition-ease-out),
  border-color var(--transition-normal) var(--transition-ease-out);
  --transition-transform: transform 200ms var(--transition-ease-out);
  --transition-opacity: opacity 200ms var(--transition-ease-out);
  --transition-shadow: box-shadow 200ms var(--transition-ease-out);
  --transition-all: all var(--transition-normal) var(--transition-ease-out);
}

/* Datei: tokens/themes.css */
/**
* Theme Tokens
*
* Comprehensive theme-specific tokens that extend the base design tokens.
* These tokens provide a semantic layer for theme variants and enable
* consistent theming across all components.
*
* @layer tokens.themes
*/

@layer tokens.themes {
/* ================= THEME COLOR TOKENS ================= */

/* Primary Theme Colors */
  @property --theme-primary {
    inherits: true;
    initial-value: #4f46e5;
    syntax: '<color>';
  }

  @property --theme-primary-hover {
    inherits: true;
    initial-value: #4338ca;
    syntax: '<color>';
  }

  @property --theme-primary-active {
    inherits: true;
    initial-value: #3730a3;
    syntax: '<color>';
  }

  @property --theme-secondary {
    inherits: true;
    initial-value: #7c3aed;
    syntax: '<color>';
  }

  @property --theme-secondary-hover {
    inherits: true;
    initial-value: #6d28d9;
    syntax: '<color>';
  }

  @property --theme-secondary-active {
    inherits: true;
    initial-value: #5b21b6;
    syntax: '<color>';
  }

/* Theme Surface Colors */
  @property --theme-background {
    inherits: true;
    initial-value: #fff;
    syntax: '<color>';
  }

  @property --theme-background-subtle {
    inherits: true;
    initial-value: #f8fafc;
    syntax: '<color>';
  }

  @property --theme-surface {
    inherits: true;
    initial-value: #f1f5f9;
    syntax: '<color>';
  }

  @property --theme-surface-elevated {
    inherits: true;
    initial-value: #fff;
    syntax: '<color>';
  }

  @property --theme-surface-overlay {
    inherits: true;
    initial-value: rgb(255 255 255 / 9000%);
    syntax: '<color>';
  }

/* Theme Text Colors */
  @property --theme-text {
    inherits: true;
    initial-value: #1e293b;
    syntax: '<color>';
  }

  @property --theme-text-muted {
    inherits: true;
    initial-value: #64748b;
    syntax: '<color>';
  }

  @property --theme-text-subtle {
    inherits: true;
    initial-value: #94a3b8;
    syntax: '<color>';
  }

  @property --theme-text-inverse {
    inherits: true;
    initial-value: #fff;
    syntax: '<color>';
  }

  @property --theme-text-on-primary {
    inherits: true;
    initial-value: #fff;
    syntax: '<color>';
  }

/* Theme Border Colors */
  @property --theme-border {
    inherits: true;
    initial-value: #e2e8f0;
    syntax: '<color>';
  }

  @property --theme-border-strong {
    inherits: true;
    initial-value: #cbd5e1;
    syntax: '<color>';
  }

  @property --theme-border-subtle {
    inherits: true;
    initial-value: #f1f5f9;
    syntax: '<color>';
  }

  @property --theme-border-focus {
    inherits: true;
    initial-value: #4f46e5;
    syntax: '<color>';
  }

/* ================= THEME EFFECT TOKENS ================= */

/* Theme Shadows */
  @property --theme-shadow-color {
    inherits: true;
    initial-value: rgb(0 0 0);
    syntax: '<color>';
  }

  @property --theme-shadow-opacity-sm {
    inherits: true;
    initial-value: 0.05;
    syntax: '<number>';
  }

  @property --theme-shadow-opacity-md {
    inherits: true;
    initial-value: 0.1;
    syntax: '<number>';
  }

  @property --theme-shadow-opacity-lg {
    inherits: true;
    initial-value: 0.15;
    syntax: '<number>';
  }

  @property --theme-shadow-opacity-xl {
    inherits: true;
    initial-value: 0.25;
    syntax: '<number>';
  }

/* Theme Focus Effects */
  @property --theme-focus-ring {
    inherits: true;
    initial-value: #4f46e5;
    syntax: '<color>';
  }

  @property --theme-focus-glow {
    inherits: true;
    initial-value: rgb(79 70 229 / 3000%);
    syntax: '<color>';
  }

  @property --theme-focus-ring-width {
    inherits: true;
    initial-value: 2px;
    syntax: '<length>';
  }

  @property --theme-focus-ring-offset {
    inherits: true;
    initial-value: 2px;
    syntax: '<length>';
  }

/* Theme Backdrop Effects */
  @property --theme-backdrop {
    inherits: true;
    initial-value: rgb(0 0 0 / 5000%);
    syntax: '<color>';
  }

  @property --theme-backdrop-blur {
    inherits: true;
    initial-value: 8px;
    syntax: '<length>';
  }

/* Theme Gradient Colors */
  @property --theme-gradient-start {
    inherits: true;
    initial-value: #4f46e5;
    syntax: '<color>';
  }

  @property --theme-gradient-end {
    inherits: true;
    initial-value: #7c3aed;
    syntax: '<color>';
  }

  @property --theme-gradient-accent {
    inherits: true;
    initial-value: #3b82f6;
    syntax: '<color>';
  }

/* ================= THEME INTERACTION TOKENS ================= */

/* Theme Hover States */
  @property --theme-hover-opacity {
    inherits: true;
    initial-value: 0.8;
    syntax: '<number>';
  }

  @property --theme-hover-scale {
    inherits: true;
    initial-value: 1.05;
    syntax: '<number>';
  }

/* Theme Active States */
  @property --theme-active-opacity {
    inherits: true;
    initial-value: 0.9;
    syntax: '<number>';
  }

  @property --theme-active-scale {
    inherits: true;
    initial-value: 0.95;
    syntax: '<number>';
  }

/* Theme Disabled States */
  @property --theme-disabled-opacity {
    inherits: true;
    initial-value: 0.5;
    syntax: '<number>';
  }

/* ================= THEME TRANSITION TOKENS ================= */

/* Theme Transition Durations */
  @property --theme-transition-fast {
    inherits: true;
    initial-value: 150ms;
    syntax: '<time>';
  }

  @property --theme-transition-normal {
    inherits: true;
    initial-value: 250ms;
    syntax: '<time>';
  }

  @property --theme-transition-slow {
    inherits: true;
    initial-value: 400ms;
    syntax: '<time>';
  }

/* Theme Transition Easings */
  @property --theme-ease-out {
    inherits: true;
    initial-value: cubic-bezier(0, 0, 0.2, 1);
    syntax: '<custom-ident>';
  }

  @property --theme-ease-in {
    inherits: true;
    initial-value: cubic-bezier(0.4, 0, 1, 1);
    syntax: '<custom-ident>';
  }

  @property --theme-ease-in-out {
    inherits: true;
    initial-value: cubic-bezier(0.4, 0, 0.2, 1);
    syntax: '<custom-ident>';
  }

/* ================= THEME STATUS TOKENS ================= */

/* Success Theme Colors */
  @property --theme-success {
    inherits: true;
    initial-value: #10b981;
    syntax: '<color>';
  }

  @property --theme-success-bg {
    inherits: true;
    initial-value: #ecfdf5;
    syntax: '<color>';
  }

  @property --theme-success-border {
    inherits: true;
    initial-value: #a7f3d0;
    syntax: '<color>';
  }

/* Warning Theme Colors */
  @property --theme-warning {
    inherits: true;
    initial-value: #f59e0b;
    syntax: '<color>';
  }

  @property --theme-warning-bg {
    inherits: true;
    initial-value: #fffbeb;
    syntax: '<color>';
  }

  @property --theme-warning-border {
    inherits: true;
    initial-value: #fed7aa;
    syntax: '<color>';
  }

/* Error Theme Colors */
  @property --theme-error {
    inherits: true;
    initial-value: #ef4444;
    syntax: '<color>';
  }

  @property --theme-error-bg {
    inherits: true;
    initial-value: #fef2f2;
    syntax: '<color>';
  }

  @property --theme-error-border {
    inherits: true;
    initial-value: #fecaca;
    syntax: '<color>';
  }

/* Info Theme Colors */
  @property --theme-info {
    inherits: true;
    initial-value: #3b82f6;
    syntax: '<color>';
  }

  @property --theme-info-bg {
    inherits: true;
    initial-value: #eff6ff;
    syntax: '<color>';
  }

  @property --theme-info-border {
    inherits: true;
    initial-value: #bfdbfe;
    syntax: '<color>';
  }

/* ================= THEME VARIANT TOKENS ================= */

/* Light Theme Variant */
  @property --theme-variant-light-bg {
    inherits: true;
    initial-value: #fff;
    syntax: '<color>';
  }

  @property --theme-variant-light-text {
    inherits: true;
    initial-value: #1e293b;
    syntax: '<color>';
  }

/* Dark Theme Variant */
  @property --theme-variant-dark-bg {
    inherits: true;
    initial-value: #1e293b;
    syntax: '<color>';
  }

  @property --theme-variant-dark-text {
    inherits: true;
    initial-value: #f1f5f9;
    syntax: '<color>';
  }

/* High Contrast Theme Variant */
  @property --theme-variant-contrast-bg {
    inherits: true;
    initial-value: #000;
    syntax: '<color>';
  }

  @property --theme-variant-contrast-text {
    inherits: true;
    initial-value: #fff;
    syntax: '<color>';
  }
}


/* Datei: tokens/spacing.css */
/**
* Spacing Properties with @property Definitions
*
* Typed CSS custom properties for spacing using @property.
* This enables better tooling support, autocomplete, and animation capabilities.
*
* @layer tokens.properties
*/

@layer tokens.properties {
/* Base Spacing Properties - Complete Scale */
  @property --space-0 {
    inherits: true;
    initial-value: 0;
    syntax: '<length>';
  }

  @property --space-px {
    inherits: true;
    initial-value: 1px;
    syntax: '<length>';
  }

  @property --space-1 {
    inherits: true;
    initial-value: 0.25rem;
    syntax: '<length>';
  }

  @property --space-2 {
    inherits: true;
    initial-value: 0.5rem;
    syntax: '<length>';
  }

  @property --space-3 {
    inherits: true;
    initial-value: 0.75rem;
    syntax: '<length>';
  }

  @property --space-4 {
    inherits: true;
    initial-value: 1rem;
    syntax: '<length>';
  }

  @property --space-5 {
    inherits: true;
    initial-value: 1.25rem;
    syntax: '<length>';
  }

  @property --space-6 {
    inherits: true;
    initial-value: 1.5rem;
    syntax: '<length>';
  }

  @property --space-7 {
    inherits: true;
    initial-value: 1.75rem;
    syntax: '<length>';
  }

  @property --space-8 {
    inherits: true;
    initial-value: 2rem;
    syntax: '<length>';
  }

  @property --space-9 {
    inherits: true;
    initial-value: 2.25rem;
    syntax: '<length>';
  }

  @property --space-10 {
    inherits: true;
    initial-value: 2.5rem;
    syntax: '<length>';
  }

  @property --space-11 {
    inherits: true;
    initial-value: 2.75rem;
    syntax: '<length>';
  }

  @property --space-12 {
    inherits: true;
    initial-value: 3rem;
    syntax: '<length>';
  }

  @property --space-14 {
    inherits: true;
    initial-value: 3.5rem;
    syntax: '<length>';
  }

  @property --space-16 {
    inherits: true;
    initial-value: 4rem;
    syntax: '<length>';
  }

  @property --space-20 {
    inherits: true;
    initial-value: 5rem;
    syntax: '<length>';
  }

  @property --space-24 {
    inherits: true;
    initial-value: 6rem;
    syntax: '<length>';
  }

  @property --space-28 {
    inherits: true;
    initial-value: 7rem;
    syntax: '<length>';
  }

  @property --space-32 {
    inherits: true;
    initial-value: 8rem;
    syntax: '<length>';
  }

  @property --space-36 {
    inherits: true;
    initial-value: 9rem;
    syntax: '<length>';
  }

  @property --space-40 {
    inherits: true;
    initial-value: 10rem;
    syntax: '<length>';
  }

  @property --space-44 {
    inherits: true;
    initial-value: 11rem;
    syntax: '<length>';
  }

  @property --space-48 {
    inherits: true;
    initial-value: 12rem;
    syntax: '<length>';
  }

  @property --space-52 {
    inherits: true;
    initial-value: 13rem;
    syntax: '<length>';
  }

  @property --space-56 {
    inherits: true;
    initial-value: 14rem;
    syntax: '<length>';
  }

  @property --space-60 {
    inherits: true;
    initial-value: 15rem;
    syntax: '<length>';
  }

  @property --space-64 {
    inherits: true;
    initial-value: 16rem;
    syntax: '<length>';
  }

  @property --space-72 {
    inherits: true;
    initial-value: 18rem;
    syntax: '<length>';
  }

  @property --space-80 {
    inherits: true;
    initial-value: 20rem;
    syntax: '<length>';
  }

  @property --space-96 {
    inherits: true;
    initial-value: 24rem;
    syntax: '<length>';
  }

/* Large spacing for special cases */
  @property --space-large-200 {
    inherits: true;
    initial-value: 200px;
    syntax: '<length>';
  }

  @property --space-large-30rem {
    inherits: true;
    initial-value: 30rem;
    syntax: '<length>';
  }

  @property --space-small-10px {
    inherits: true;
    initial-value: 10px;
    syntax: '<length>';
  }

/* Semantic Spacing Aliases */
  @property --space-xs {
    inherits: true;
    initial-value: 0.25rem;
    syntax: '<length>';
  }

  @property --space-sm {
    inherits: true;
    initial-value: 0.5rem;
    syntax: '<length>';
  }

  @property --space-md {
    inherits: true;
    initial-value: 1rem;
    syntax: '<length>';
  }

  @property --space-lg {
    inherits: true;
    initial-value: 1.5rem;
    syntax: '<length>';
  }

  @property --space-xl {
    inherits: true;
    initial-value: 2rem;
    syntax: '<length>';
  }

  @property --space-2xl {
    inherits: true;
    initial-value: 3rem;
    syntax: '<length>';
  }

  @property --space-3xl {
    inherits: true;
    initial-value: 4rem;
    syntax: '<length>';
  }

/* Component-Specific Spacing Properties */
  @property --space-button-padding-x {
    inherits: true;
    initial-value: 1rem;
    syntax: '<length>';
  }

  @property --space-button-padding-y {
    inherits: true;
    initial-value: 0.5rem;
    syntax: '<length>';
  }

  @property --space-card-padding {
    inherits: true;
    initial-value: 1.5rem;
    syntax: '<length>';
  }

  @property --space-form-gap {
    inherits: true;
    initial-value: 1rem;
    syntax: '<length>';
  }

  @property --space-section-gap {
    inherits: true;
    initial-value: 3rem;
    syntax: '<length>';
  }

  @property --space-input-padding {
    inherits: true;
    initial-value: 0.75rem;
    syntax: '<length>';
  }

  @property --space-modal-padding {
    inherits: true;
    initial-value: 1.5rem;
    syntax: '<length>';
  }

/* Gap Properties */
  @property --space-gap-xs {
    inherits: true;
    initial-value: 0.25rem;
    syntax: '<length>';
  }

  @property --space-gap-sm {
    inherits: true;
    initial-value: 0.5rem;
    syntax: '<length>';
  }

  @property --space-gap-md {
    inherits: true;
    initial-value: 1rem;
    syntax: '<length>';
  }

  @property --space-gap-lg {
    inherits: true;
    initial-value: 1.5rem;
    syntax: '<length>';
  }

  @property --space-gap-xl {
    inherits: true;
    initial-value: 2rem;
    syntax: '<length>';
  }

/* Layout Spacing Properties */
  @property --space-container-padding {
    inherits: true;
    initial-value: 1rem;
    syntax: '<length>';
  }

  @property --space-grid-gap {
    inherits: true;
    initial-value: 1rem;
    syntax: '<length>';
  }

  @property --space-flex-gap {
    inherits: true;
    initial-value: 1rem;
    syntax: '<length>';
  }

/* Animatable Spacing Properties */
  @property --space-transition-padding {
    inherits: true;
    initial-value: 1rem;
    syntax: '<length>';
  }

  @property --space-transition-margin {
    inherits: true;
    initial-value: 1rem;
    syntax: '<length>';
  }

  @property --space-transition-gap {
    inherits: true;
    initial-value: 1rem;
    syntax: '<length>';
  }

/* Initial Value Definitions */
  :root {
/* Base Spacing Scale */
    --space-0: 0;
    --space-px: 1px;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-9: 2.25rem;
    --space-10: 2.5rem;
    --space-11: 2.75rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-28: 7rem;
    --space-32: 8rem;
    --space-36: 9rem;
    --space-40: 10rem;
    --space-44: 11rem;
    --space-48: 12rem;
    --space-52: 13rem;
    --space-56: 14rem;
    --space-60: 15rem;
    --space-64: 16rem;
    --space-72: 18rem;
    --space-80: 20rem;
    --space-96: 24rem;

/* Component Spacing */
    --space-button-padding-x: var(--space-md);
    --space-button-padding-y: var(--space-sm);
    --space-card-padding: var(--space-lg);
    --space-form-gap: var(--space-md);
    --space-section-gap: var(--space-3xl);

/* Layout Spacing */
    --space-container-padding: var(--space-md);
    --space-grid-gap: var(--space-md);
    --space-flex-gap: var(--space-md);

/* Transition Spacing */
    --space-transition-padding: var(--space-md);
    --space-transition-margin: var(--space-md);
    --space-transition-gap: var(--space-md);
  }
}

/* Datei: tokens/shadows.css */
/**
* Shadow Properties with @property Definitions
*
* Typed CSS custom properties for shadows using @property.
* This enables better tooling support, autocomplete, and animation capabilities.
*
* @layer tokens.properties
*/

@layer tokens.properties {
/* Base Shadow Properties */
  @property --shadow-none {
    inherits: false;
    initial-value: none;

  }

  @property --shadow-xs {
    inherits: false;
    initial-value: 0 1px 2px 0 rgb(0 0 0 / 5%);

  }

  @property --shadow-sm {
    inherits: false;
    initial-value: 0 1px 2px 0 rgb(0 0 0 / 5%);

  }

  @property --shadow-md {
    inherits: false;
    initial-value: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);

  }

  @property --shadow-lg {
    inherits: false;
    initial-value: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);

  }

  @property --shadow-xl {
    inherits: false;
    initial-value: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);

  }

  @property --shadow-2xl {
    inherits: false;
    initial-value: 0 25px 50px -12px rgb(0 0 0 / 25%);

  }

  @property --shadow-inner {
    inherits: false;
    initial-value: inset 0 2px 4px 0 rgb(0 0 0 / 5%);

  }

/* Component-Specific Shadow Properties */
  @property --shadow-card {
    inherits: false;
    initial-value: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%);

  }

  @property --shadow-modal {
    inherits: false;
    initial-value: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);

  }

  @property --shadow-dropdown {
    inherits: false;
    initial-value: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);

  }

  @property --shadow-tooltip {
    inherits: false;
    initial-value: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);

  }

  @property --shadow-button {
    inherits: false;
    initial-value: 0 1px 2px 0 rgb(0 0 0 / 5%);

  }

  @property --shadow-button-hover {
    inherits: false;
    initial-value: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);

  }
}

/* Fallback Values für alle Shadow-Definitionen */
:root {
/* Base Shadow Scale */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 5%);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 5%);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 25%);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 5%);

/* Component Shadows */
  --shadow-card: var(--shadow-sm);
  --shadow-modal: var(--shadow-xl);
  --shadow-dropdown: var(--shadow-lg);
  --shadow-tooltip: var(--shadow-md);
  --shadow-button: var(--shadow-xs);
  --shadow-button-hover: var(--shadow-md);
}

/* Datei: tokens/radius.css */
/**
* Border Radius Properties with @property Definitions
*
* Typed CSS custom properties for border-radius using @property.
* This enables better tooling support, autocomplete, and animation capabilities.
*
* @layer tokens.properties
*/

@layer tokens.properties {
/* Base Radius Properties */
  @property --radius-none {
    inherits: true;
    initial-value: 0;
    syntax: '<length>';
  }

  @property --radius-xs {
    inherits: true;
    initial-value: 0.125rem;
    syntax: '<length>';
  }

  @property --radius-sm {
    inherits: true;
    initial-value: 0.25rem;
    syntax: '<length>';
  }

  @property --radius-md {
    inherits: true;
    initial-value: 0.375rem;
    syntax: '<length>';
  }

  @property --radius-lg {
    inherits: true;
    initial-value: 0.5rem;
    syntax: '<length>';
  }

  @property --radius-xl {
    inherits: true;
    initial-value: 0.75rem;
    syntax: '<length>';
  }

  @property --radius-2xl {
    inherits: true;
    initial-value: 1rem;
    syntax: '<length>';
  }

  @property --radius-3xl {
    inherits: true;
    initial-value: 1.5rem;
    syntax: '<length>';
  }

  @property --radius-full {
    inherits: true;
    initial-value: 9999px;
    syntax: '<length-percentage>';
  }

/* Component-Specific Radius Properties */
  @property --radius-button {
    inherits: true;
    initial-value: 0.375rem;
    syntax: '<length>';
  }

  @property --radius-card {
    inherits: true;
    initial-value: 0.5rem;
    syntax: '<length>';
  }

  @property --radius-input {
    inherits: true;
    initial-value: 0.375rem;
    syntax: '<length>';
  }

  @property --radius-modal {
    inherits: true;
    initial-value: 0.75rem;
    syntax: '<length>';
  }

  @property --radius-badge {
    inherits: true;
    initial-value: 0.25rem;
    syntax: '<length>';
  }

  @property --radius-avatar {
    inherits: true;
    initial-value: 50;
    syntax: '<length-percentage>';
  }

/* Interactive Radius Properties */
  @property --radius-hover {
    inherits: true;
    initial-value: 0.5rem;
    syntax: '<length>';
  }

  @property --radius-focus {
    inherits: true;
    initial-value: 0.375rem;
    syntax: '<length>';
  }

/* Animatable Radius Properties */
  @property --radius-transition {
    inherits: true;
    initial-value: 0.375rem;
    syntax: '<length>';
  }

  @property --radius-transition-hover {
    inherits: true;
    initial-value: 0.5rem;
    syntax: '<length>';
  }

/* Initial Value Definitions */
  :root {
/* Base Radius Scale */
    --radius-none: 0;
    --radius-xs: 0.125rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-full: 9999px;

/* Component Radius */
    --radius-button: var(--radius-md);
    --radius-card: var(--radius-lg);
    --radius-input: var(--radius-md);
    --radius-modal: var(--radius-xl);
    --radius-badge: var(--radius-sm);
    --radius-avatar: 50;

/* Interactive Radius */
    --radius-hover: var(--radius-lg);
    --radius-focus: var(--radius-md);

/* Transition Radius */
    --radius-transition: var(--radius-md);
    --radius-transition-hover: var(--radius-lg);

/* Border-Radius Aliases (für Kompatibilität mit Typography-System) */
    --border-radius-none: var(--radius-none);
    --border-radius-sm: var(--radius-sm);
    --border-radius-md: var(--radius-md);
    --border-radius-lg: var(--radius-lg);
    --border-radius-xl: var(--radius-xl);
    --border-radius-full: var(--radius-full);
  }
}

/* Datei: tokens/layout.css */
/* Clean Layout Tokens */
@layer tokens.properties {
  :root {
    --container-sm: 640px;
    --container-md: 768px;
  }
}


/* Datei: tokens/index.css */
/**
* Design Token Index
*
* Zentraler Import aller Design Tokens für das Dragonfly Design System.
* Diese Datei importiert alle Token-Kategorien in der richtigen Reihenfolge.
*
* @layer tokens
* @version 2.0.0
* @author Dragonfly Design System
*/

/* Core Design Tokens */
/* Importierte Datei: tokens/colors.css */
/**
* Optimierte Color Properties mit @property
*
* Enthält nur semantische und animierbare Farb-Tokens.
* Alle Abstufungen (z. B. -100 bis -900) werden im `@layer colors` gepflegt.
*
* @layer tokens.properties
*/

@layer tokens.properties {
/* Base Colors */
  @property --color-white {
    inherits: true;
    initial-value: #fff;
    syntax: '<color>';
  }

  @property --color-black {
    inherits: true;
    initial-value: #000;
    syntax: '<color>';
  }

/* Accessibility-specific colors */
  @property --color-gray-very-dark {
    inherits: true;
    initial-value: #1a1a1a;
    syntax: '<color>';
  }

  @property --color-gray-medium {
    inherits: true;
    initial-value: #6b6b6b;
    syntax: '<color>';
  }

  @property --color-gray-very-light {
    inherits: true;
    initial-value: #f2f2f2;
    syntax: '<color>';
  }

/* Opacity-based colors */
  @property --color-overlay-dark {
    inherits: true;
    initial-value: rgb(0 0 0 / 80%);
    syntax: '<color>';
  }

  @property --color-overlay-medium {
    inherits: true;
    initial-value: rgb(0 0 0 / 60%);
    syntax: '<color>';
  }

/* Basis-Farbtokens */
  @property --color-primary {
    inherits: true;
    initial-value: #06f;
    syntax: '<color>';
  }

  @property --color-secondary {
    inherits: true;
    initial-value: #5333ff;
    syntax: '<color>';
  }

  @property --color-success {
    inherits: true;
    initial-value: #10b981;
    syntax: '<color>';
  }

  @property --color-warning {
    inherits: true;
    initial-value: #f59e0b;
    syntax: '<color>';
  }

  @property --color-error {
    inherits: true;
    initial-value: #ef4444;
    syntax: '<color>';
  }

  @property --color-info {
    inherits: true;
    initial-value: #06f;
    syntax: '<color>';
  }

  @property --color-neutral {
    inherits: true;
    initial-value: #6b7280;
    syntax: '<color>';
  }

/* Textfarben */
  @property --color-text {
    inherits: true;
    initial-value: #1f2937;
    syntax: '<color>';
  }

  @property --color-text-muted {
    inherits: true;
    initial-value: #6b7280;
    syntax: '<color>';
  }

  @property --color-text-inverse {
    inherits: true;
    initial-value: #fff;
    syntax: '<color>';
  }

/* Oberflächenfarben */
  @property --color-background {
    inherits: true;
    initial-value: #fff;
    syntax: '<color>';
  }

  @property --color-surface {
    inherits: true;
    initial-value: #f9fafb;
    syntax: '<color>';
  }

  @property --color-surface-elevated {
    inherits: true;
    initial-value: #fff;
    syntax: '<color>';
  }

/* Rahmenfarben */
  @property --color-border {
    inherits: true;
    initial-value: #e5e7eb;
    syntax: '<color>';
  }

  @property --color-border-strong {
    inherits: true;
    initial-value: #d1d5db;
    syntax: '<color>';
  }

/* Für animierbare Transitions */
  @property --color-transition-primary {
    inherits: true;
    initial-value: #06f;
    syntax: '<color>';
  }

  @property --color-transition-surface {
    inherits: true;
    initial-value: #fff;
    syntax: '<color>';
  }

  @property --color-transition-text {
    inherits: true;
    initial-value: #1f2937;
    syntax: '<color>';
  }

/* Erweiterte Farbabstufungen für Komponenten */

/* Primary Color Scale */
  @property --color-primary-50 {
    inherits: true;
    initial-value: #eff6ff;
    syntax: '<color>';
  }

  @property --color-primary-100 {
    inherits: true;
    initial-value: #dbeafe;
    syntax: '<color>';
  }

  @property --color-primary-200 {
    inherits: true;
    initial-value: #bfdbfe;
    syntax: '<color>';
  }

  @property --color-primary-300 {
    inherits: true;
    initial-value: #93c5fd;
    syntax: '<color>';
  }

  @property --color-primary-400 {
    inherits: true;
    initial-value: #60a5fa;
    syntax: '<color>';
  }

  @property --color-primary-500 {
    inherits: true;
    initial-value: #3b82f6;
    syntax: '<color>';
  }

  @property --color-primary-600 {
    inherits: true;
    initial-value: #2563eb;
    syntax: '<color>';
  }

  @property --color-primary-700 {
    inherits: true;
    initial-value: #1d4ed8;
    syntax: '<color>';
  }

  @property --color-primary-800 {
    inherits: true;
    initial-value: #1e40af;
    syntax: '<color>';
  }

  @property --color-primary-900 {
    inherits: true;
    initial-value: #1e3a8a;
    syntax: '<color>';
  }

/* Secondary Color Scale */
  @property --color-secondary-50 {
    inherits: true;
    initial-value: #f8fafc;
    syntax: '<color>';
  }

  @property --color-secondary-100 {
    inherits: true;
    initial-value: #f1f5f9;
    syntax: '<color>';
  }

  @property --color-secondary-200 {
    inherits: true;
    initial-value: #e2e8f0;
    syntax: '<color>';
  }

  @property --color-secondary-300 {
    inherits: true;
    initial-value: #cbd5e1;
    syntax: '<color>';
  }

  @property --color-secondary-400 {
    inherits: true;
    initial-value: #94a3b8;
    syntax: '<color>';
  }

  @property --color-secondary-500 {
    inherits: true;
    initial-value: #64748b;
    syntax: '<color>';
  }

  @property --color-secondary-600 {
    inherits: true;
    initial-value: #475569;
    syntax: '<color>';
  }

  @property --color-secondary-700 {
    inherits: true;
    initial-value: #334155;
    syntax: '<color>';
  }

  @property --color-secondary-800 {
    inherits: true;
    initial-value: #1e293b;
    syntax: '<color>';
  }

  @property --color-secondary-900 {
    inherits: true;
    initial-value: #0f172a;
    syntax: '<color>';
  }

/* Success Color Scale */
  @property --color-success-50 {
    inherits: true;
    initial-value: #ecfdf5;
    syntax: '<color>';
  }

  @property --color-success-100 {
    inherits: true;
    initial-value: #d1fae5;
    syntax: '<color>';
  }

  @property --color-success-200 {
    inherits: true;
    initial-value: #a7f3d0;
    syntax: '<color>';
  }

  @property --color-success-300 {
    inherits: true;
    initial-value: #6ee7b7;
    syntax: '<color>';
  }

  @property --color-success-400 {
    inherits: true;
    initial-value: #34d399;
    syntax: '<color>';
  }

  @property --color-success-500 {
    inherits: true;
    initial-value: #10b981;
    syntax: '<color>';
  }

  @property --color-success-600 {
    inherits: true;
    initial-value: #059669;
    syntax: '<color>';
  }

  @property --color-success-700 {
    inherits: true;
    initial-value: #047857;
    syntax: '<color>';
  }

  @property --color-success-800 {
    inherits: true;
    initial-value: #065f46;
    syntax: '<color>';
  }

  @property --color-success-900 {
    inherits: true;
    initial-value: #064e3b;
    syntax: '<color>';
  }

/* Warning Color Scale */
  @property --color-warning-50 {
    inherits: true;
    initial-value: #fffbeb;
    syntax: '<color>';
  }

  @property --color-warning-100 {
    inherits: true;
    initial-value: #fef3c7;
    syntax: '<color>';
  }

  @property --color-warning-200 {
    inherits: true;
    initial-value: #fde68a;
    syntax: '<color>';
  }

  @property --color-warning-300 {
    inherits: true;
    initial-value: #fcd34d;
    syntax: '<color>';
  }

  @property --color-warning-400 {
    inherits: true;
    initial-value: #fbbf24;
    syntax: '<color>';
  }

  @property --color-warning-500 {
    inherits: true;
    initial-value: #f59e0b;
    syntax: '<color>';
  }

  @property --color-warning-600 {
    inherits: true;
    initial-value: #d97706;
    syntax: '<color>';
  }

  @property --color-warning-700 {
    inherits: true;
    initial-value: #b45309;
    syntax: '<color>';
  }

  @property --color-warning-800 {
    inherits: true;
    initial-value: #92400e;
    syntax: '<color>';
  }

  @property --color-warning-900 {
    inherits: true;
    initial-value: #78350f;
    syntax: '<color>';
  }

/* Error Color Scale */
  @property --color-error-50 {
    inherits: true;
    initial-value: #fef2f2;
    syntax: '<color>';
  }

  @property --color-error-100 {
    inherits: true;
    initial-value: #fee2e2;
    syntax: '<color>';
  }

  @property --color-error-200 {
    inherits: true;
    initial-value: #fecaca;
    syntax: '<color>';
  }

  @property --color-error-300 {
    inherits: true;
    initial-value: #fca5a5;
    syntax: '<color>';
  }

  @property --color-error-400 {
    inherits: true;
    initial-value: #f87171;
    syntax: '<color>';
  }

  @property --color-error-500 {
    inherits: true;
    initial-value: #ef4444;
    syntax: '<color>';
  }

  @property --color-error-600 {
    inherits: true;
    initial-value: #dc2626;
    syntax: '<color>';
  }

  @property --color-error-700 {
    inherits: true;
    initial-value: #b91c1c;
    syntax: '<color>';
  }

  @property --color-error-800 {
    inherits: true;
    initial-value: #991b1b;
    syntax: '<color>';
  }

  @property --color-error-900 {
    inherits: true;
    initial-value: #7f1d1d;
    syntax: '<color>';
  }

/* Info Color Scale */
  @property --color-info-50 {
    inherits: true;
    initial-value: #f0f9ff;
    syntax: '<color>';
  }

  @property --color-info-100 {
    inherits: true;
    initial-value: #e0f2fe;
    syntax: '<color>';
  }

  @property --color-info-200 {
    inherits: true;
    initial-value: #bae6fd;
    syntax: '<color>';
  }

  @property --color-info-300 {
    inherits: true;
    initial-value: #7dd3fc;
    syntax: '<color>';
  }

  @property --color-info-400 {
    inherits: true;
    initial-value: #38bdf8;
    syntax: '<color>';
  }

  @property --color-info-500 {
    inherits: true;
    initial-value: #0ea5e9;
    syntax: '<color>';
  }

  @property --color-info-600 {
    inherits: true;
    initial-value: #0284c7;
    syntax: '<color>';
  }

  @property --color-info-700 {
    inherits: true;
    initial-value: #0369a1;
    syntax: '<color>';
  }

  @property --color-info-800 {
    inherits: true;
    initial-value: #075985;
    syntax: '<color>';
  }

  @property --color-info-900 {
    inherits: true;
    initial-value: #0c4a6e;
    syntax: '<color>';
  }

/* Neutral Color Scale */
  @property --color-neutral-50 {
    inherits: true;
    initial-value: #f9fafb;
    syntax: '<color>';
  }

  @property --color-neutral-100 {
    inherits: true;
    initial-value: #f3f4f6;
    syntax: '<color>';
  }

  @property --color-neutral-200 {
    inherits: true;
    initial-value: #e5e7eb;
    syntax: '<color>';
  }

  @property --color-neutral-300 {
    inherits: true;
    initial-value: #d1d5db;
    syntax: '<color>';
  }

  @property --color-neutral-400 {
    inherits: true;
    initial-value: #9ca3af;
    syntax: '<color>';
  }

  @property --color-neutral-500 {
    inherits: true;
    initial-value: #6b7280;
    syntax: '<color>';
  }

  @property --color-neutral-600 {
    inherits: true;
    initial-value: #4b5563;
    syntax: '<color>';
  }

  @property --color-neutral-700 {
    inherits: true;
    initial-value: #374151;
    syntax: '<color>';
  }

  @property --color-neutral-800 {
    inherits: true;
    initial-value: #1f2937;
    syntax: '<color>';
  }

  @property --color-neutral-900 {
    inherits: true;
    initial-value: #111827;
    syntax: '<color>';
  }

/* Gray Color Scale (alias für neutral) */
  @property --color-gray-50 {
    inherits: true;
    initial-value: #f9fafb;
    syntax: '<color>';
  }

  @property --color-gray-100 {
    inherits: true;
    initial-value: #f3f4f6;
    syntax: '<color>';
  }

  @property --color-gray-200 {
    inherits: true;
    initial-value: #e5e7eb;
    syntax: '<color>';
  }

  @property --color-gray-300 {
    inherits: true;
    initial-value: #d1d5db;
    syntax: '<color>';
  }

  @property --color-gray-400 {
    inherits: true;
    initial-value: #9ca3af;
    syntax: '<color>';
  }

  @property --color-gray-500 {
    inherits: true;
    initial-value: #6b7280;
    syntax: '<color>';
  }

  @property --color-gray-600 {
    inherits: true;
    initial-value: #4b5563;
    syntax: '<color>';
  }

  @property --color-gray-700 {
    inherits: true;
    initial-value: #374151;
    syntax: '<color>';
  }

  @property --color-gray-800 {
    inherits: true;
    initial-value: #1f2937;
    syntax: '<color>';
  }

  @property --color-gray-900 {
    inherits: true;
    initial-value: #111827;
    syntax: '<color>';
  }

/* Text Color Scale */
  @property --color-text-50 {
    inherits: true;
    initial-value: #f9fafb;
    syntax: '<color>';
  }

  @property --color-text-100 {
    inherits: true;
    initial-value: #f3f4f6;
    syntax: '<color>';
  }

  @property --color-text-200 {
    inherits: true;
    initial-value: #e5e7eb;
    syntax: '<color>';
  }

  @property --color-text-300 {
    inherits: true;
    initial-value: #d1d5db;
    syntax: '<color>';
  }

  @property --color-text-400 {
    inherits: true;
    initial-value: #9ca3af;
    syntax: '<color>';
  }

  @property --color-text-500 {
    inherits: true;
    initial-value: #6b7280;
    syntax: '<color>';
  }

  @property --color-text-600 {
    inherits: true;
    initial-value: #4b5563;
    syntax: '<color>';
  }

  @property --color-text-700 {
    inherits: true;
    initial-value: #374151;
    syntax: '<color>';
  }

  @property --color-text-800 {
    inherits: true;
    initial-value: #1f2937;
    syntax: '<color>';
  }

  @property --color-text-900 {
    inherits: true;
    initial-value: #111827;
    syntax: '<color>';
  }

/* Surface Color Scale */
  @property --color-surface-50 {
    inherits: true;
    initial-value: #fafafa;
    syntax: '<color>';
  }

  @property --color-surface-100 {
    inherits: true;
    initial-value: #f5f5f5;
    syntax: '<color>';
  }

  @property --color-surface-200 {
    inherits: true;
    initial-value: #eee;
    syntax: '<color>';
  }

  @property --color-surface-300 {
    inherits: true;
    initial-value: #e0e0e0;
    syntax: '<color>';
  }

/* Border Color Scale */
  @property --color-border-50 {
    inherits: true;
    initial-value: #fafafa;
    syntax: '<color>';
  }

  @property --color-border-100 {
    inherits: true;
    initial-value: #f4f4f5;
    syntax: '<color>';
  }

  @property --color-border-200 {
    inherits: true;
    initial-value: #e4e4e7;
    syntax: '<color>';
  }

  @property --color-border-300 {
    inherits: true;
    initial-value: #d4d4d8;
    syntax: '<color>';
  }
}

/* Fallback Values für alle Farbabstufungen */
:root {
/* Primary Scale */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;

/* Secondary Scale */
  --color-secondary-50: #f8fafc;
  --color-secondary-100: #f1f5f9;
  --color-secondary-200: #e2e8f0;
  --color-secondary-300: #cbd5e1;
  --color-secondary-400: