/**
 * ============================================================================
 * KuLaDu Design System - CSS Custom Properties
 * ============================================================================
 *
 * Vollständiges Design System für das KuLaDu-Projekt (Kulturverein auf dem Land)
 *
 * Standards:
 * - WCAG 2.2 AA konform (Kontrastverhältnisse: 4.5:1 für Text, 3:1 für UI)
 * - Mobile-first Ansatz mit Fluid Typography
 * - 8px-basiertes Spacing System
 * - Kompatibel mit Bricks Builder, WordPress, Custom CSS
 *
 * Version: 1.0.0
 * Erstellt: 2025-11-04
 *
 * Import in WordPress Theme (functions.php):
 * wp_enqueue_style('kuladu-variables', get_stylesheet_directory_uri() . '/assets/css/design-system/kuladu-variables.css', array(), '1.0.0');
 *
 * Import in Bricks Builder:
 * - Kopiere den Inhalt von kuladu-variables-bricks.txt
 * - Füge ein unter: Bricks → Settings → Custom Code → CSS
 * ============================================================================
 */

:root {
  /* ==========================================================================
     1. FARBSYSTEM (KOMPLETT)
     ========================================================================== */

  /* --------------------------------------------------------------------------
     1.1 Brand Colors - Primary (Gelb-Grün - Natur/Kultur)
     Basis: #CECB06 (Hauptgelb-grün)
     -------------------------------------------------------------------------- */
  --color-primary-950: #2a2901;    /* Sehr dunkel */
  --color-primary-900: #4a4702;    /* Dunkelgelb-grün */
  --color-primary-800: #6a6402;
  --color-primary-700: #8a8203;
  --color-primary-600: #aaa004;
  --color-primary-500: #CECB06;    /* Hauptgelb-grün - WCAG AA konform */
  --color-primary-400: #dcd838;
  --color-primary-300: #e5e26a;
  --color-primary-200: #eeeb9c;
  --color-primary-100: #f6f5ce;
  --color-primary-50: #fbfae7;

  /* --------------------------------------------------------------------------
     1.2 Brand Colors - Secondary (Gelb)
     Basis: #F5E314 (Hauptgelb)
     -------------------------------------------------------------------------- */
  --color-secondary-950: #322f02;
  --color-secondary-900: #5a5204;
  --color-secondary-800: #827506;
  --color-secondary-700: #aa9808;
  --color-secondary-600: #d2bb0a;
  --color-secondary-500: #F5E314;   /* Hauptgelb - WCAG AA konform */
  --color-secondary-400: #f7e943;
  --color-secondary-300: #f9ee72;
  --color-secondary-200: #fbf3a1;
  --color-secondary-100: #fdf9d0;
  --color-secondary-50: #fefce8;

  /* --------------------------------------------------------------------------
     1.3 Brand Colors - Tertiary (Orange)
     Basis: #E65715 (Hauptorange)
     -------------------------------------------------------------------------- */
  --color-tertiary-950: #2e1103;
  --color-tertiary-900: #521e05;
  --color-tertiary-800: #762b08;
  --color-tertiary-700: #9a380a;
  --color-tertiary-600: #be450d;
  --color-tertiary-500: #E65715;    /* Hauptorange - WCAG AA konform */
  --color-tertiary-400: #eb7544;
  --color-tertiary-300: #ef9373;
  --color-tertiary-200: #f4b1a2;
  --color-tertiary-100: #f9d8d0;
  --color-tertiary-50: #fcece8;

  /* --------------------------------------------------------------------------
     1.4 Sand/Beige (Warme Neutrals)
     Wärmer als Grau, weniger Sättigung als Gelb
     Basis: #EEE8DD
     -------------------------------------------------------------------------- */
  --color-sand-950: #3d3830;
  --color-sand-900: #5a4f43;
  --color-sand-800: #766756;
  --color-sand-700: #937f69;
  --color-sand-600: #b09a7e;
  --color-sand-500: #cdb599;
  --color-sand-400: #d9c5ab;
  --color-sand-300: #e5d6c2;
  --color-sand-200: #EEE8DD;        /* Helles Sand (Light-Button) */
  --color-sand-100: #F7F3EE;        /* Sehr hell */
  --color-sand-50: #faf8f5;

  /* --------------------------------------------------------------------------
     1.5 Neutrals (Graustufen - WCAG 2.2 AA konform)
     Basis: #0A0A0A (Schwarz für Typografie)
     -------------------------------------------------------------------------- */
  --color-black: #101010;           /* Typografie-Schwarz */
  --color-gray-950: #1a1a1a;
  --color-gray-900: #262626;
  --color-gray-800: #333333;        /* AA auf Weiß */
  --color-gray-700: #4d4d4d;        /* AA+ auf Weiß */
  --color-gray-600: #666666;
  --color-gray-500: #808080;
  --color-gray-400: #999999;        /* Platzhalter */
  --color-gray-300: #b3b3b3;        /* Leichte Borders */
  --color-gray-200: #D9D9D9;        /* Borders */
  --color-gray-100: #e6e6e6;        /* BG hell */
  --color-gray-50: #f5f5f5;         /* BG sehr hell */
  --color-white: #FFFFFF;

  /* --------------------------------------------------------------------------
     1.5 Semantic Colors - Success (Grün) - WCAG 2.2 AA
     -------------------------------------------------------------------------- */
  --color-success-950: #1a3a0d;
  --color-success-900: #2D5214;     /* Nutze Primary-Grün */
  --color-success-800: #3a6819;
  --color-success-700: #477e1e;
  --color-success-600: #5AA329;
  --color-success-500: #6cb534;
  --color-success-400: #7BC255;
  --color-success-300: #9cd481;
  --color-success-200: #bee5ac;
  --color-success-100: #dff5d8;
  --color-success-50: #f0faea;

  /* Kontrast-geprüfte Paare für Text */
  --color-success: var(--color-success-600);           /* 4.5:1 auf Weiß */
  --color-success-text: var(--color-success-800);      /* Text auf hellem BG */
  --color-success-bg: var(--color-success-50);         /* Hintergrund */
  --color-success-border: var(--color-success-300);    /* Border */

  /* --------------------------------------------------------------------------
     1.6 Semantic Colors - Warning (Gelb/Orange) - WCAG 2.2 AA
     -------------------------------------------------------------------------- */
  --color-warning-950: #7a3b0a;
  --color-warning-900: #a04e0d;
  --color-warning-800: #c66110;
  --color-warning-700: #ec7413;
  --color-warning-600: #f89d3d;     /* Angepasst für AA-Kontrast */
  --color-warning-500: #FABD24;
  --color-warning-400: #fcc84e;
  --color-warning-300: #fdd876;
  --color-warning-200: #fee89e;
  --color-warning-100: #fef4c7;
  --color-warning-50: #fffaef;

  --color-warning: var(--color-warning-600);
  --color-warning-text: var(--color-warning-800);
  --color-warning-bg: var(--color-warning-50);
  --color-warning-border: var(--color-warning-300);

  /* --------------------------------------------------------------------------
     1.7 Semantic Colors - Error (Rot) - WCAG 2.2 AA
     -------------------------------------------------------------------------- */
  --color-error-950: #450a0a;
  --color-error-900: #7f1d1d;
  --color-error-800: #991b1b;
  --color-error-700: #b91c1c;
  --color-error-600: #dc2626;       /* WCAG AA konform */
  --color-error-500: #ef4444;
  --color-error-400: #f87171;
  --color-error-300: #fca5a5;
  --color-error-200: #fecaca;
  --color-error-100: #fee2e2;
  --color-error-50: #fef2f2;

  --color-error: var(--color-error-600);
  --color-error-text: var(--color-error-800);
  --color-error-bg: var(--color-error-50);
  --color-error-border: var(--color-error-300);

  /* --------------------------------------------------------------------------
     1.8 Semantic Colors - Info (Blau) - WCAG 2.2 AA
     -------------------------------------------------------------------------- */
  --color-info-950: #082f49;
  --color-info-900: #0c4a6e;
  --color-info-800: #075985;
  --color-info-700: #0369a1;
  --color-info-600: #0284c7;        /* WCAG AA konform */
  --color-info-500: #0ea5e9;
  --color-info-400: #38bdf8;
  --color-info-300: #7dd3fc;
  --color-info-200: #bae6fd;
  --color-info-100: #e0f2fe;
  --color-info-50: #f0f9ff;

  --color-info: var(--color-info-600);
  --color-info-text: var(--color-info-800);
  --color-info-bg: var(--color-info-50);
  --color-info-border: var(--color-info-300);

  /* --------------------------------------------------------------------------
     1.9 Background Colors (Alle Varianten)
     -------------------------------------------------------------------------- */
  /* Basis Hintergründe */
  --bg-body: var(--color-white);
  --bg-primary: var(--color-white);
  --bg-secondary: var(--color-off-white);
  --bg-tertiary: var(--color-gray-50);

  /* Akzent Hintergründe */
  --bg-accent-cream: var(--color-tertiary-500);
  --bg-accent-beige: var(--color-tertiary-600);
  --bg-accent-light-beige: var(--color-light-beige);
  --bg-accent-pink: var(--color-light-pink);

  /* Brand Hintergründe */
  --bg-primary-light: var(--color-primary-50);
  --bg-primary-medium: var(--color-primary-100);
  --bg-primary-dark: var(--color-primary-900);
  --bg-secondary-light: var(--color-secondary-50);
  --bg-secondary-dark: var(--color-secondary-900);

  /* Funktionale Hintergründe */
  --bg-overlay: rgba(10, 10, 10, 0.7);
  --bg-overlay-light: rgba(10, 10, 10, 0.3);
  --bg-overlay-dark: rgba(10, 10, 10, 0.9);
  --bg-elevated: var(--color-white);    /* Für Cards, Modals */
  --bg-sunken: var(--color-gray-50);    /* Eingesetzte Bereiche */
  --bg-hover: var(--color-gray-100);
  --bg-active: var(--color-gray-200);
  --bg-disabled: var(--color-gray-100);

  /* --------------------------------------------------------------------------
     1.10 Text Colors (Alle Varianten)
     -------------------------------------------------------------------------- */
  /* Basis Text */
  --text-primary: var(--color-black);
  --text-secondary: var(--color-gray-700);
  --text-tertiary: var(--color-gray-500);
  --text-muted: var(--color-gray-400);
  --text-disabled: var(--color-gray-300);
  --text-placeholder: var(--color-gray-400);

  /* Text auf farbigen Hintergründen */
  --text-on-primary: var(--color-black);       /* Weiß auf Grün */
  --text-on-secondary: var(--color-black);     /* Schwarz auf Gelb */
  --text-on-tertiary: var(--color-black);      /* Schwarz auf Beige */
  --text-on-dark: var(--color-white);
  --text-on-light: var(--color-black);

  /* Link Farben */
  --text-link: var(--color-black);
  --text-link-hover: var(--color-black);
  --text-link-visited: var(--color-black);
  --text-link-active: var(--color-black);

  /* Status Text */
  --text-success: var(--color-success-text);
  --text-warning: var(--color-warning-text);
  --text-error: var(--color-error-text);
  --text-info: var(--color-info-text);

  /* --------------------------------------------------------------------------
     1.11 Border Colors (Alle Varianten)
     -------------------------------------------------------------------------- */
  /* Standard Borders */
  --border-color: var(--color-gray-200);
  --border-color-light: var(--color-gray-100);
  --border-color-medium: var(--color-gray-300);
  --border-color-dark: var(--color-black);

  /* Focus & Interactive */
  --border-color-focus: var(--color-primary-600);
  --border-color-hover: var(--color-gray-400);
  --border-color-active: var(--color-primary-700);
  --border-color-error: var(--color-error-600);
  --border-color-success: var(--color-success-600);

  /* Brand Borders */
  --border-color-primary: var(--color-primary-600);
  --border-color-secondary: var(--color-secondary-600);
  --border-color-tertiary: var(--color-tertiary-600);

  /* ==========================================================================
     2. TYPOGRAFIE (KOMPLETT)
     ========================================================================== */

  /* --------------------------------------------------------------------------
     2.1 Font Families (Adobe Fonts)
     -------------------------------------------------------------------------- */
  --font-heading: gill-sans-nova, sans-serif;          /* Headlines/Subheads (Semibold 600, Bold 700, UltraBold 900) */
  --font-body: merriweather, serif;                    /* Fließtext (Regular 400, Italic 400, Bold 700, Bold Italic 700) */
  --font-mono: source-code-pro, monospace;             /* Details/Daten (Regular 400) */
  --font-ui: gill-sans-nova, sans-serif;               /* Buttons/UI (Semibold 600) */

  /* --------------------------------------------------------------------------
     2.2 Font Sizes (Typescale-based - Mobile First)
     -------------------------------------------------------------------------- */
  /*
   * Neue Typescale basierend auf Typescale.com
   * Base: 112.5% (18px) auf Mobile, 100% (16px) auf Desktop
   * Scale: 1.125 (Major Second)
   * Responsive: Feste Werte mit Breakpoint @768px
   */

  /* Mobile First (Base: 18px = 112.5%) */
  --text-size-80: 0.79rem;      /* ~14px - Tiny text */
  --text-size-90: 0.889rem;     /* ~16px - Small text */
  --text-size-100: 1rem;        /* ~18px - Base body text */
  --text-size-200: 1.125rem;    /* ~20px - H6 */
  --text-size-300: 1.266rem;    /* ~23px - H5, Lead */
  --text-size-400: 1.424rem;    /* ~26px - H4 */
  --text-size-500: 1.602rem;    /* ~29px - H3 */
  --text-size-600: 1.802rem;    /* ~32px - H2 */
  --text-size-700: 2.027rem;    /* ~36px - H1 */

  /* --------------------------------------------------------------------------
     2.3 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;

  /* Semantic Weights (Typescale-based) */
  --font-weight-body: var(--font-weight-normal);        /* Merriweather Regular 400 (Body, Lead, Paragraph) */
  --font-weight-body-bold: var(--font-weight-bold);     /* Merriweather Bold 700 */
  --font-weight-heading: var(--font-weight-black);      /* Gill Sans Nova Ultra/Black 900 (Headlines h1-h6) */
  --font-weight-button: var(--font-weight-semibold);    /* Gill Sans Nova Bold 700 (Buttons) */
  --font-weight-badge: var(--font-weight-semibold);     /* Gill Sans Nova Semibold 600 (Badges) */
  --font-weight-ui: var(--font-weight-semibold);        /* Gill Sans Nova Semibold 600 (UI Elements) */

  /* --------------------------------------------------------------------------
     2.4 Line Heights (Typescale-based)
     -------------------------------------------------------------------------- */
  --line-height-none: 1;
  --line-height-tight: 1.25;      /* Headlines (Typescale) */
  --line-height-snug: 1.375;      /* Subheadlines */
  --line-height-normal: 1.5;      /* Body Standard */
  --line-height-relaxed: 1.6;     /* Body, Lead, Paragraph (Typescale) */
  --line-height-loose: 1.75;      /* Sehr luftig */
  --line-height-extra-loose: 2;

  /* Semantic Line Heights (Typescale-based) */
  --line-height-heading: var(--line-height-snug);     /* 1.25 für Headlines */
  --line-height-body: var(--line-height-relaxed);      /* 1.6 für Body/Lead/Paragraph */
  --line-height-button: 1.5rem;                        /* 24px für Buttons (konsistente Höhe) */

  /* --------------------------------------------------------------------------
     2.5 Letter Spacing (Typescale-based)
     -------------------------------------------------------------------------- */
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.022em;   /* Headlines (Typescale) */
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;

  /* Semantic Letter Spacing (Typescale-based) */
  --letter-spacing-heading: var(--letter-spacing-tight);   /* -0.022em für Headlines */
  --letter-spacing-body: var(--letter-spacing-normal);     /* 0 für Body */
  --letter-spacing-button: var(--letter-spacing-normal);   /* 0 für Buttons */

  /* --------------------------------------------------------------------------
     2.6 Text Transform & Decoration
     -------------------------------------------------------------------------- */
  --text-transform-none: none;
  --text-transform-uppercase: uppercase;
  --text-transform-lowercase: lowercase;
  --text-transform-capitalize: capitalize;

  --text-decoration-none: none;
  --text-decoration-underline: underline;
  --text-decoration-line-through: line-through;

  /* --------------------------------------------------------------------------
     2.7 Typography Margins (Typescale-based - separate from layout spacing)
     -------------------------------------------------------------------------- */
  /* Headline Margins */
  --typo-heading-margin-top: 2.25rem;     /* ~36px - Space before headlines */
  --typo-heading-margin-bottom: 1.5rem;     /* ~16px - Space after headlines */

  /* Paragraph Margins */
  --typo-paragraph-margin-top: 1rem;      /* ~16px - Space before paragraphs */
  --typo-paragraph-margin-bottom: 1rem;   /* ~16px - Space after paragraphs */

  /* List Margins */
  --typo-list-margin-top: 1rem;           /* ~16px - Space before lists */
  --typo-list-margin-bottom: 1rem;        /* ~16px - Space after lists */

  /* ==========================================================================
     3. SPACING SYSTEM (8px-basiert - Komplett)
     ========================================================================== */

  /* --------------------------------------------------------------------------
     3.1 Base Spacing Scale
     -------------------------------------------------------------------------- */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;   /* 2px */
  --space-1: 0.25rem;      /* 4px */
  --space-1-5: 0.375rem;   /* 6px */
  --space-2: 0.5rem;       /* 8px */
  --space-2-5: 0.625rem;   /* 10px */
  --space-3: 0.75rem;      /* 12px */
  --space-3-5: 0.875rem;   /* 14px */
  --space-4: 1rem;         /* 16px */
  --space-5: 1.25rem;      /* 20px */
  --space-6: 1.5rem;       /* 24px */
  --space-7: 1.75rem;      /* 28px */
  --space-8: 2rem;         /* 32px */
  --space-9: 2.25rem;      /* 36px */
  --space-10: 2.5rem;      /* 40px */
  --space-11: 2.75rem;     /* 44px */
  --space-12: 3rem;        /* 48px */
  --space-14: 3.5rem;      /* 56px */
  --space-16: 4rem;        /* 64px */
  --space-20: 5rem;        /* 80px */
  --space-24: 6rem;        /* 96px */
  --space-28: 7rem;        /* 112px */
  --space-32: 8rem;        /* 128px */
  --space-36: 9rem;        /* 144px */
  --space-40: 10rem;       /* 160px */
  --space-44: 11rem;       /* 176px */
  --space-48: 12rem;       /* 192px */
  --space-52: 13rem;       /* 208px */
  --space-56: 14rem;       /* 224px */
  --space-60: 15rem;       /* 240px */
  --space-64: 16rem;       /* 256px */
  --space-72: 18rem;       /* 288px */
  --space-80: 20rem;       /* 320px */
  --space-96: 24rem;       /* 384px */

  /* --------------------------------------------------------------------------
     3.2 Semantic Spacing (Shortcuts)
     -------------------------------------------------------------------------- */
  /* Allgemein */
  --spacing-3xs: var(--space-0-5);   /* 2px */
  --spacing-2xs: var(--space-1);     /* 4px */
  --spacing-xs: var(--space-2);      /* 8px */
  --spacing-sm: var(--space-4);      /* 16px */
  --spacing-md: var(--space-6);      /* 24px */
  --spacing-lg: var(--space-8);      /* 32px */
  --spacing-xl: var(--space-12);     /* 48px */
  --spacing-2xl: var(--space-16);    /* 64px */
  --spacing-3xl: var(--space-24);    /* 96px */
  --spacing-4xl: var(--space-32);    /* 128px */
  --spacing-5xl: var(--space-40);    /* 160px */
  --spacing-6xl: var(--space-48);    /* 192px */

  /* Component-spezifisch */
  --spacing-button-padding-x: var(--space-6);
  --spacing-button-padding-y: var(--space-3);
  --spacing-input-padding-x: var(--space-4);
  --spacing-input-padding-y: var(--space-2);
  --spacing-card-padding: var(--space-6);
  --spacing-section-padding-y: var(--space-16);
  --spacing-container-padding-x: var(--space-4);

  /* --------------------------------------------------------------------------
     3.3 Gap (für Flexbox/Grid)
     -------------------------------------------------------------------------- */
  --gap-0: 0;
  --gap-px: 1px;
  --gap-0-5: 0.125rem;   /* 2px */
  --gap-1: 0.25rem;      /* 4px */
  --gap-2: 0.5rem;       /* 8px */
  --gap-3: 0.75rem;      /* 12px */
  --gap-4: 1rem;         /* 16px */
  --gap-5: 1.25rem;      /* 20px */
  --gap-6: 1.5rem;       /* 24px */
  --gap-7: 1.75rem;      /* 28px */
  --gap-8: 2rem;         /* 32px */
  --gap-10: 2.5rem;      /* 40px */
  --gap-12: 3rem;        /* 48px */
  --gap-16: 4rem;        /* 64px */
  --gap-20: 5rem;        /* 80px */
  --gap-24: 6rem;        /* 96px */

  /* ==========================================================================
     4. BORDER SYSTEM (Komplett)
     ========================================================================== */

  /* --------------------------------------------------------------------------
     4.1 Border Widths
     -------------------------------------------------------------------------- */
  --border-width-0: 0;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;
  --border-width-8: 8px;

  /* Semantic Border Widths */
  --border-width-thin: var(--border-width-1);
  --border-width-medium: var(--border-width-2);
  --border-width-thick: var(--border-width-4);
  --border-width-extra-thick: var(--border-width-8);

  /* --------------------------------------------------------------------------
     4.2 Border Styles
     -------------------------------------------------------------------------- */
  --border-style-solid: solid;
  --border-style-dashed: dashed;
  --border-style-dotted: dotted;
  --border-style-double: double;
  --border-style-none: none;

  /* --------------------------------------------------------------------------
     4.3 Border Radius (Komplett)
     -------------------------------------------------------------------------- */
  --radius-none: 0;
  --radius-xs: 0.125rem;     /* 2px */
  --radius-sm: 0.25rem;      /* 4px */
  --radius-md: 0.375rem;     /* 6px */
  --radius-DEFAULT: 0.5rem;  /* 8px */
  --radius-lg: 0.75rem;      /* 12px */
  --radius-xl: 1rem;         /* 16px */
  --radius-2xl: 1.5rem;      /* 24px */
  --radius-3xl: 2rem;        /* 32px */
  --radius-4xl: 3rem;        /* 48px */
  --radius-full: 9999px;     /* Vollständig rund */

  --radius-speech-bubble-sm: var(--radius-sm);
  --radius-speech-bubble-md: var(--radius-DEFAULT);
  --radius-speech-bubble-lg: var(--radius-2xl);

  /* --------------------------------------------------------------------------
     4.4 Sprechblasen-Radien (Asymmetrisch)
     -------------------------------------------------------------------------- */
  /* Sprechblasen-Effekt für Callouts/Cards */
  --radius-bubble-default: 2rem 2rem 2rem 0.25rem;
  --radius-bubble-reverse: 0.25rem 2rem 2rem 2rem;
  --radius-bubble-top: 2rem 2rem 0.25rem 2rem;
  --radius-bubble-bottom: 2rem 0.25rem 2rem 2rem;

  /* Individual Corners für custom Kombinationen */
  --radius-bubble-tl: 2rem;      /* Top-Left */
  --radius-bubble-tr: 2rem;      /* Top-Right */
  --radius-bubble-br: 2rem;      /* Bottom-Right */
  --radius-bubble-bl: 0.25rem;   /* Bottom-Left (Spitze) */

  /* --------------------------------------------------------------------------
     4.5 Composite Borders (Fertige Kombinationen)
     -------------------------------------------------------------------------- */
  --border-thin: var(--border-width-1) var(--border-style-solid) var(--border-color);
  --border-medium: var(--border-width-2) var(--border-style-solid) var(--border-color);
  --border-thick: var(--border-width-4) var(--border-style-solid) var(--border-color);

  --border-primary: var(--border-width-2) var(--border-style-solid) var(--border-color-primary);
  --border-secondary: var(--border-width-2) var(--border-style-solid) var(--border-color-secondary);
  --border-error: var(--border-width-2) var(--border-style-solid) var(--border-color-error);

  /* ==========================================================================
     5. SCHATTEN (Shadows - Komplett)
     ========================================================================== */

  /* --------------------------------------------------------------------------
     5.1 Harte Schatten (Design-Style)
     -------------------------------------------------------------------------- */
  /* Harte Offset-Schatten (Charakteristisch für KuLaDu) */
  --shadow-hard-xs: 2px 2px 0 var(--color-black);
  --shadow-hard-sm: 4px 4px 0 var(--color-black);
  --shadow-hard-md: 6px 6px 0 var(--color-black);
  --shadow-hard-lg: 8px 8px 0 var(--color-black);
  --shadow-hard-xl: 12px 12px 0 var(--color-black);
  --shadow-hard-2xl: 16px 16px 0 var(--color-black);

  /* Harte Schatten - Farbvarianten */
  --shadow-hard-primary: 6px 6px 0 var(--color-primary-900);
  --shadow-hard-primary-sm: 4px 4px 0 var(--color-primary-900);
  --shadow-hard-secondary: 6px 6px 0 var(--color-secondary-900);
  --shadow-hard-secondary-sm: 4px 4px 0 var(--color-secondary-900);
  --shadow-hard-tertiary: 6px 6px 0 var(--color-tertiary-900);
  --shadow-hard-gray: 6px 6px 0 var(--color-gray-800);

  /* --------------------------------------------------------------------------
     5.2 Weiche Schatten (Subtile Varianten)
     -------------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-DEFAULT: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-3xl: 0 35px 60px -15px rgba(0, 0, 0, 0.3);

  /* --------------------------------------------------------------------------
     5.3 Inset Shadows
     -------------------------------------------------------------------------- */
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  --shadow-inner-md: inset 0 4px 8px 0 rgba(0, 0, 0, 0.1);
  --shadow-inner-lg: inset 0 6px 12px 0 rgba(0, 0, 0, 0.15);

  /* --------------------------------------------------------------------------
     5.4 Focus Shadows (für Accessibility)
     -------------------------------------------------------------------------- */
  --shadow-focus: 0 0 0 3px rgba(90, 163, 41, 0.5);              /* Primary */
  --shadow-focus-error: 0 0 0 3px rgba(220, 38, 38, 0.5);        /* Error */
  --shadow-focus-visible: 0 0 0 4px rgba(90, 163, 41, 0.6);      /* Sichtbarer Focus */

  /* --------------------------------------------------------------------------
     5.5 Semantic Shadows
     -------------------------------------------------------------------------- */
  --shadow-card: var(--shadow-hard-md);
  --shadow-card-hover: var(--shadow-hard-lg);
  --shadow-button: var(--shadow-hard-sm);
  --shadow-button-hover: var(--shadow-hard-md);
  --shadow-dropdown: var(--shadow-lg);
  --shadow-modal: var(--shadow-2xl);
  --shadow-tooltip: var(--shadow-md);

  /* ==========================================================================
     6. CONTAINER & LAYOUT (Komplett)
     ========================================================================== */

  /* --------------------------------------------------------------------------
     6.1 Container Widths
     -------------------------------------------------------------------------- */
  --container-xs: 20rem;      /* 320px */
  --container-sm: 36rem;      /* 576px */
  --container-md: 48rem;      /* 768px */
  --container-lg: 62rem;      /* 992px */
  --container-xl: 75rem;      /* 1200px (Standard) */
  --container-2xl: 90rem;     /* 1440px */
  --container-3xl: 100rem;    /* 1600px */
  --container-4xl: 120rem;    /* 1920px (Full HD) */

  /* Semantic Containers */
  --container-content: var(--container-xl);
  --container-wide: var(--container-2xl);
  --container-narrow: var(--container-md);

  /* --------------------------------------------------------------------------
     6.2 Content Widths (für Lesbarkeit)
     -------------------------------------------------------------------------- */
  --content-width-narrow: 45ch;    /* ~45 Zeichen (schmale Spalten) */
  --content-width-DEFAULT: 65ch;   /* ~65 Zeichen (optimal für Fließtext) */
  --content-width-wide: 80ch;      /* ~80 Zeichen (breitere Texte) */

  /* --------------------------------------------------------------------------
     6.3 Section Spacing
     -------------------------------------------------------------------------- */
  --section-spacing-xs: var(--space-12);   /* 48px */
  --section-spacing-sm: var(--space-16);   /* 64px */
  --section-spacing-md: var(--space-24);   /* 96px */
  --section-spacing-lg: var(--space-32);   /* 128px */
  --section-spacing-xl: var(--space-40);   /* 160px */
  --section-spacing-2xl: var(--space-48);  /* 192px */

  /* --------------------------------------------------------------------------
     6.4 Grid System
     -------------------------------------------------------------------------- */
  --grid-columns-2: repeat(2, minmax(0, 1fr));
  --grid-columns-3: repeat(3, minmax(0, 1fr));
  --grid-columns-4: repeat(4, minmax(0, 1fr));
  --grid-columns-6: repeat(6, minmax(0, 1fr));
  --grid-columns-12: repeat(12, minmax(0, 1fr));

  /* Auto-fit Grid (Responsive Cards) */
  --grid-auto-fit-xs: repeat(auto-fit, minmax(200px, 1fr));
  --grid-auto-fit-sm: repeat(auto-fit, minmax(250px, 1fr));
  --grid-auto-fit-md: repeat(auto-fit, minmax(300px, 1fr));
  --grid-auto-fit-lg: repeat(auto-fit, minmax(350px, 1fr));

  /* --------------------------------------------------------------------------
     6.5 Aspect Ratios
     -------------------------------------------------------------------------- */
  --aspect-square: 1 / 1;
  --aspect-video: 16 / 9;
  --aspect-cinema: 21 / 9;
  --aspect-portrait: 3 / 4;
  --aspect-landscape: 4 / 3;
  --aspect-ultrawide: 18 / 5;

  /* ==========================================================================
     7. TRANSITIONS & ANIMATIONS (Komplett)
     ========================================================================== */

  /* --------------------------------------------------------------------------
     7.1 Duration
     -------------------------------------------------------------------------- */
  --duration-instant: 75ms;
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-medium: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 700ms;
  --duration-slowest: 1000ms;

  /* Semantic Durations */
  --duration-tooltip: var(--duration-fast);
  --duration-hover: var(--duration-normal);
  --duration-modal: var(--duration-medium);
  --duration-page-transition: var(--duration-slow);

  /* --------------------------------------------------------------------------
     7.2 Easing Functions
     -------------------------------------------------------------------------- */
  /* Standard Easing */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Custom Easing für KuLaDu */
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);    /* Spritzig/mutig */
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);      /* Subtil */
  --ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);      /* Elastisch */
  --ease-sharp: cubic-bezier(0.4, 0, 0.6, 1);               /* Scharf */

  /* Semantic Easing */
  --ease-hover: var(--ease-out);
  --ease-modal: var(--ease-smooth);
  --ease-button: var(--ease-out);

  /* --------------------------------------------------------------------------
     7.3 Transition Properties (Vorgefertigte Kombinationen)
     -------------------------------------------------------------------------- */
  --transition-all: all var(--duration-normal) var(--ease-out);
  --transition-colors: color var(--duration-normal) var(--ease-out),
                       background-color var(--duration-normal) var(--ease-out),
                       border-color var(--duration-normal) var(--ease-out);
  --transition-opacity: opacity var(--duration-normal) var(--ease-out);
  --transition-shadow: box-shadow var(--duration-normal) var(--ease-out);
  --transition-transform: transform var(--duration-normal) var(--ease-out);

  /* Component Transitions */
  --transition-button: background-color var(--duration-normal) var(--ease-out),
                       transform var(--duration-fast) var(--ease-out),
                       box-shadow var(--duration-normal) var(--ease-out);
  --transition-card: transform var(--duration-normal) var(--ease-smooth),
                     box-shadow var(--duration-normal) var(--ease-smooth);
  --transition-modal: opacity var(--duration-medium) var(--ease-smooth),
                      transform var(--duration-medium) var(--ease-smooth);

  /* --------------------------------------------------------------------------
     7.4 Transform Values
     -------------------------------------------------------------------------- */
  --scale-0: 0;
  --scale-50: 0.5;
  --scale-75: 0.75;
  --scale-90: 0.9;
  --scale-95: 0.95;
  --scale-100: 1;
  --scale-105: 1.05;
  --scale-110: 1.1;
  --scale-125: 1.25;
  --scale-150: 1.5;

  --rotate-0: 0deg;
  --rotate-1: 1deg;
  --rotate-2: 2deg;
  --rotate-3: 3deg;
  --rotate-6: 6deg;
  --rotate-12: 12deg;
  --rotate-45: 45deg;
  --rotate-90: 90deg;
  --rotate-180: 180deg;

  /* ==========================================================================
     8. Z-INDEX SYSTEM (Komplett)
     ========================================================================== */
  --z-base: 0;
  --z-docked: 10;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-banner: 1200;
  --z-overlay: 1300;
  --z-modal: 1400;
  --z-popover: 1500;
  --z-skiplink: 1600;
  --z-toast: 1700;
  --z-tooltip: 1800;
  --z-notification: 1900;
  --z-debug: 2000;

  /* Semantic Z-Index */
  --z-header: var(--z-sticky);
  --z-navigation: var(--z-dropdown);
  --z-cookie-banner: var(--z-notification);

  /* ==========================================================================
     9. BREAKPOINTS (Komplett)
     ========================================================================== */
  /* Mobile First Breakpoints */
  --breakpoint-xs: 480px;     /* Extra Small (Large Phone) */
  --breakpoint-sm: 640px;     /* Small (Small Tablet) */
  --breakpoint-md: 768px;     /* Medium (Tablet) */
  --breakpoint-lg: 1024px;    /* Large (Small Desktop) */
  --breakpoint-xl: 1280px;    /* Extra Large (Desktop) */
  --breakpoint-2xl: 1536px;   /* 2XL (Large Desktop) */
  --breakpoint-3xl: 1920px;   /* 3XL (Full HD) */

  /* Semantic Breakpoints */
  --breakpoint-mobile: var(--breakpoint-xs);
  --breakpoint-tablet: var(--breakpoint-md);
  --breakpoint-desktop: var(--breakpoint-lg);
  --breakpoint-wide: var(--breakpoint-2xl);

  /* ==========================================================================
     10. OPACITY SCALE
     ========================================================================== */
  --opacity-0: 0;
  --opacity-5: 0.05;
  --opacity-10: 0.1;
  --opacity-20: 0.2;
  --opacity-25: 0.25;
  --opacity-30: 0.3;
  --opacity-40: 0.4;
  --opacity-50: 0.5;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-75: 0.75;
  --opacity-80: 0.8;
  --opacity-90: 0.9;
  --opacity-95: 0.95;
  --opacity-100: 1;

  /* Semantic Opacity */
  --opacity-disabled: var(--opacity-50);
  --opacity-hover: var(--opacity-80);
  --opacity-muted: var(--opacity-60);

  /* ==========================================================================
     11. BLUR & FILTERS
     ========================================================================== */
  /* Blur */
  --blur-none: 0;
  --blur-sm: 4px;
  --blur-DEFAULT: 8px;
  --blur-md: 12px;
  --blur-lg: 16px;
  --blur-xl: 24px;
  --blur-2xl: 40px;
  --blur-3xl: 64px;

  /* Backdrop Blur */
  --backdrop-blur-sm: blur(4px);
  --backdrop-blur-DEFAULT: blur(8px);
  --backdrop-blur-md: blur(12px);
  --backdrop-blur-lg: blur(16px);
  --backdrop-blur-xl: blur(24px);

  /* ==========================================================================
     12. FORM ELEMENTS (Spezifische Variablen)
     ========================================================================== */

  /* --------------------------------------------------------------------------
     12.1 Input Styles
     -------------------------------------------------------------------------- */
  /* Input Sizes */
  --input-height-sm: 2rem;      /* 32px */
  --input-height-md: 2.5rem;    /* 40px */
  --input-height-lg: 3rem;      /* 48px */
  --input-height-xl: 3.5rem;    /* 56px */

  /* Input Padding */
  --input-padding-x-sm: var(--space-3);    /* 12px */
  --input-padding-x-md: var(--space-4);    /* 16px */
  --input-padding-x-lg: var(--space-5);    /* 20px */

  --input-padding-y-sm: var(--space-2);    /* 8px */
  --input-padding-y-md: var(--space-2-5);  /* 10px */
  --input-padding-y-lg: var(--space-3);    /* 12px */

  /* Input States */
  --input-bg: var(--color-white);
  --input-bg-disabled: var(--color-gray-100);
  --input-border: var(--border-thin);
  --input-border-focus: var(--border-width-2) solid var(--color-primary-600);
  --input-border-error: var(--border-width-2) solid var(--color-error-600);

  /* --------------------------------------------------------------------------
     12.2 Button Styles (Optimized for exact heights)
     -------------------------------------------------------------------------- */
  /* Button Heights */
  --button-height-xs: 1.75rem;   /* 28px */
  --button-height-sm: 2rem;      /* 32px */
  --button-height-md: 2.5rem;    /* 40px */
  --button-height-lg: 3rem;      /* 48px */
  --button-height-xl: 3.5rem;    /* 56px */

  /* Button Font Sizes (fixed for consistent heights) */
  --button-font-size-sm: 0.875rem;  /* 14px - für 32px Höhe */
  --button-font-size-md: 1rem;      /* 16px - für 40px Höhe */
  --button-font-size-lg: 1.125rem;  /* 18px - für 48px Höhe */

  /* Button Padding X (horizontal) */
  --button-padding-x-sm: .5rem;      /* 16px */
  --button-padding-x-md: .75rem;    /* 24px */
  --button-padding-x-lg: 1rem;      /* 32px */

  /* Button Padding Y (vertical) - calculated for exact heights */
  --button-padding-y-sm: 0.5625rem; /* 9px → 9 + 9 + 14 = 32px */
  --button-padding-y-md: 0.75rem;   /* 12px → 12 + 12 + 16 = 40px */
  --button-padding-y-lg: 0.9375rem; /* 15px → 15 + 15 + 18 = 48px */

  /* Legacy (deprecated - use specific sizes above) */
  --button-padding-x-xs: var(--space-2);    /* 8px */
  --button-padding-x-xl: var(--space-10);   /* 40px */
  --button-padding-y-xs: var(--space-1);    /* 4px */

  /* --------------------------------------------------------------------------
     12.3 Checkbox & Radio
     -------------------------------------------------------------------------- */
  --checkbox-size-sm: 1rem;      /* 16px */
  --checkbox-size-md: 1.25rem;   /* 20px */
  --checkbox-size-lg: 1.5rem;    /* 24px */

  --radio-size-sm: 1rem;
  --radio-size-md: 1.25rem;
  --radio-size-lg: 1.5rem;

  /* ==========================================================================
     13. ICON SIZES
     ========================================================================== */
  --icon-size-xs: 0.75rem;    /* 12px */
  --icon-size-sm: 1rem;       /* 16px */
  --icon-size-md: 1.25rem;    /* 20px */
  --icon-size-lg: 1.5rem;     /* 24px */
  --icon-size-xl: 2rem;       /* 32px */
  --icon-size-2xl: 2.5rem;    /* 40px */
  --icon-size-3xl: 3rem;      /* 48px */

  /* ==========================================================================
     14. CURSOR TYPES
     ========================================================================== */
  --cursor-auto: auto;
  --cursor-default: default;
  --cursor-pointer: pointer;
  --cursor-wait: wait;
  --cursor-text: text;
  --cursor-move: move;
  --cursor-not-allowed: not-allowed;
  --cursor-grab: grab;
  --cursor-grabbing: grabbing;

  /* ==========================================================================
     15. SCROLLBAR STYLING
     ========================================================================== */
  --scrollbar-width-thin: thin;
  --scrollbar-width-auto: auto;
  --scrollbar-width-none: none;

  --scrollbar-track-bg: var(--color-gray-100);
  --scrollbar-thumb-bg: var(--color-gray-400);
  --scrollbar-thumb-hover-bg: var(--color-gray-500);
}

/* ==============================================================================
   RESPONSIVE SPEECH BUBBLE RADII - Desktop Breakpoint (768px+)
   ============================================================================== */
@media (min-width: 768px) {
  :root {
    --radius-speech-bubble-sm: var(--radius-DEFAULT);
    --radius-speech-bubble-md: var(--radius-2xl);
    --radius-speech-bubble-lg: var(--radius-4xl);
  }
}

/* ==============================================================================
   RESPONSIVE TYPOGRAPHY - Desktop Breakpoint (768px+)
   ============================================================================== */
/*
 * Desktop Font-Sizes (Base: 16px = 100%)
 * Kleinere Werte als Mobile für bessere Lesbarkeit auf großen Bildschirmen
 */
@media screen and (min-width: 768px) {
  :root {
    --text-size-80: 0.75rem;     /* ~12px - Tiny text */
    --text-size-90: 0.875rem;     /* ~14px - Small text */
    --text-size-100: 1rem;        /* ~16px - Base body text */
    --text-size-200: 1.125rem;      /* ~18px - H6 */
    --text-size-300: 1.5rem;     /* ~24px - H5, Lead */
    --text-size-400: 1.75rem;    /* ~28px - H4 */
    --text-size-500: 2rem;    /* ~32px - H3 */
    --text-size-600: 2.5rem;    /* ~40px - H2 */
    --text-size-700: 3rem;    /* ~48px - H1 */
  }
}

/* ==============================================================================
   ACCESSIBILITY - Prefers Reduced Motion
   ============================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-medium: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
    --duration-slowest: 0ms;
  }
}

/* ==============================================================================
   PRINT STYLES
   ============================================================================== */
@media print {
  :root {
    --print-color-adjust: exact;
    --print-color-mode: color;
  }
}