/**
 * Expertaizer Design Tokens
 * ================================
 * Zentrale Design-System-Variablen für konsistentes UI
 *
 * Version: 1.0.0
 * Created: December 2025
 *
 * USAGE: @import url('./design-tokens.css'); am Anfang jeder CSS-Datei
 * oder einmalig in index.html vor allen anderen Stylesheets
 */
@import url('./animations.css');
:root {
  /* ==========================================================================
     COLOR PALETTE - Corporate Design
     ========================================================================== */

  /* Primary Colors (Blue/Cyan Family) */
  --color-primary: #0ea5e9;           /* Sky-500 - Hauptfarbe */
  --color-primary-rgb: 14, 165, 233;
  --color-primary-light: #38bdf8;     /* Sky-400 - Hover/Light */
  --color-primary-light-rgb: 56, 189, 248;
  --color-primary-dark: #0369a1;      /* Sky-700 - Dark/Active */
  --color-primary-darker: #0c4a6e;    /* Sky-900 - Extra Dark */

  /* Secondary Colors */
  --color-secondary: #3b82f6;         /* Blue-500 */
  --color-secondary-rgb: 59, 130, 246;
  --color-secondary-light: #60a5fa;   /* Blue-400 */
  --color-secondary-dark: #2563eb;    /* Blue-600 */

  /* Accent Colors */
  --color-accent: #06b6d4;            /* Cyan-500 */
  --color-accent-rgb: 6, 182, 212;
  --color-accent-light: #22d3ee;      /* Cyan-400 */
  --color-success: #10b981;           /* Emerald-500 */
  --color-success-rgb: 16, 185, 129;
  --color-success-light: #34d399;     /* Emerald-400 */
  --color-warning: #f59e0b;           /* Amber-500 - Nur für "Popular" Badges */
  --color-warning-rgb: 245, 158, 11;
  --color-error: #ef4444;             /* Red-500 */
  --color-error-rgb: 239, 68, 68;
  --color-error-light: #f87171;       /* Red-400 */

  /* Additional Palette Colors */
  --color-purple: #a855f7;
  --color-purple-rgb: 168, 85, 247;
  --color-blue: #3b82f6;
  --color-blue-rgb: 59, 130, 246;
  --color-orange: #f97316;
  --color-orange-rgb: 249, 115, 22;
  --color-yellow: #eab308;
  --color-yellow-rgb: 234, 179, 8;

  /* Background Colors */
  --bg-base: #0f172a;                 /* Slate-900 */
  --bg-elevated: #1e293b;             /* Slate-800 */
  --bg-surface: #334155;              /* Slate-700 */
  --bg-overlay: rgba(15, 23, 42, 0.95);
  --bg-dark: #0f172a;                 /* Aliases for theme engine */
  --bg-dark-rgb: 15, 23, 42;
  --bg-darker: #0a0f1e;
  --bg-darker-rgb: 10, 15, 30;
  --color-bg-dark: #0f172a;           /* Backward compatibility for legacy files */
  --color-bg-dark-rgb: 15, 23, 42;
  --color-bg-darker: #0a0f1e;
  --color-bg-darker-rgb: 10, 15, 30;

  /* Text Colors */
  --text-primary: #f8fafc;            /* Slate-50 */
  --text-secondary: #cbd5e1;          /* Slate-300 */
  --text-muted: #94a3b8;              /* Slate-400 */
  --text-disabled: #64748b;           /* Slate-500 */

  /* Border Colors */
  --border-default: rgba(255, 255, 255, 0.1);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.2);
  --border-focus: rgba(var(--color-primary-rgb), 0.5);


  /* ==========================================================================
     BORDER RADIUS - Konsistente Rundungen
     ========================================================================== */

  --radius-xs: 4px;      /* Tiny elements (progress bars, inline badges) */
  --radius-sm: 6px;      /* Small elements (tags, chips, small badges) */
  --radius-md: 8px;      /* Standard elements (buttons, inputs, cards) */
  --radius-lg: 12px;     /* Large elements (panels, sections) */
  --radius-xl: 16px;     /* Extra large (modals, dialogs) */
  --radius-2xl: 20px;    /* Hero elements (main windows) */
  --radius-full: 9999px; /* Pills, avatars */


  /* ==========================================================================
     GLASSMORPHISM - Blur & Transparency
     ========================================================================== */

  /* Glass Backgrounds */
  --glass-bg-subtle: rgba(255, 255, 255, 0.03);
  --glass-bg-light: rgba(255, 255, 255, 0.06);
  --glass-bg-medium: rgba(255, 255, 255, 0.08);
  --glass-bg-strong: rgba(255, 255, 255, 0.12);
  --glass-bg-dark: rgba(15, 23, 42, 0.4);
  --glass-bg-darker: rgba(10, 15, 30, 0.6);

  /* Glass Borders */
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-border-light: rgba(255, 255, 255, 0.15);
  --glass-border-strong: rgba(255, 255, 255, 0.2);

  /* Glass Blur (Centralized) */
  --glass-blur-xs: 4px;
  --glass-blur-sm: 8px;
  --glass-blur-md: 16px;
  --glass-blur-lg: 24px;
  --glass-blur-xl: 40px;


  /* ==========================================================================
     Z-INDEX SCALE - Schichten-Management (2026 Unified)
     ========================================================================== */

  --z-below: -1;
  --z-base: 0;
  --z-above: 1;
  --z-canvas: 10;
  --z-nav: 100;
  --z-sidebar: 110;
  --z-panel: 120;
  --z-dropdown: 130;
  --z-window: 500;
  --z-window-active: 900;
  --z-modal-backdrop: 2000;
  --z-modal: 2010;
  --z-fullscreen: 10000;
  --z-window-float: 70000; /* Standard floating-window Layer (viele Fenster) */
  --z-topbar: 75000;   /* Muss ÜBER aktiven Fenstern (70000) liegen! */
  --z-tooltip: 85000;
  --z-toast: 90000;
  --z-max: 999999;

  /* ==========================================================================
     SCROLLBARS - Standard Glass Styling
     ========================================================================== */

  --scrollbar-width: 8px;
  --scrollbar-track: rgba(255, 255, 255, 0.05);
  --scrollbar-thumb: rgba(255, 255, 255, 0.15);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25);


  /* ==========================================================================
     SPACING - Consistent Padding & Margins
     ========================================================================== */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Semantic spacing */
  --spacing-xs: var(--space-1);
  --spacing-sm: var(--space-2);
  --spacing-md: var(--space-4);
  --spacing-lg: var(--space-6);
  --spacing-xl: var(--space-8);
  --spacing-2xl: var(--space-12);

  /* Component-specific spacing */
  --padding-button-sm: 8px 12px;
  --padding-button-md: 12px 20px;
  --padding-button-lg: 14px 28px;
  --padding-input: 12px 14px;
  --padding-card: 20px;
  --padding-panel: 24px;


  /* ==========================================================================
     TYPOGRAPHY - Font Sizes & Weights
     ========================================================================== */

  /* Font Family Stack */
  --font-sans: 'Montserrat', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-primary: var(--font-sans);
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Font Sizes */
  --text-2xs: 10px;    /* Micro text (rarely used) */
  --text-xs: 11px;     /* Meta, timestamps, badges */
  --text-sm: 12px;     /* Secondary info, captions */
  --text-md: 13px;     /* Labels, form hints */
  --text-base: 14px;   /* Body text, default */
  --text-lg: 16px;     /* Subheaders, emphasis */
  --text-xl: 18px;     /* Section headers */
  --text-2xl: 20px;    /* Panel titles */
  --text-3xl: 24px;    /* Page headers */
  --text-4xl: 28px;    /* Hero text */

  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* Font Weights */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;


  /* ==========================================================================
     SHADOWS - Depth & Elevation
     ========================================================================== */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.4);
  --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.5);

  /* Glow Shadows (for focus/active states) */
  --shadow-glow-primary: 0 0 20px rgba(var(--color-primary-rgb), 0.4);
  --shadow-glow-success: 0 0 20px rgba(var(--color-success-rgb), 0.4);
  --shadow-glow-error: 0 0 20px rgba(239, 68, 68, 0.3);

  /* Inset Shadows (for pressed states) */
  --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.2);


  /* ==========================================================================
     TRANSITIONS - Animation Timing
     ========================================================================== */

  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s ease;
  --transition-slower: 0.6s ease;

  /* Easing Functions */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}


/* =============================================================================
   UTILITY CLASSES - Quick Application
   ============================================================================= */

/* Glass Effect Classes */
.glass-subtle {
  background: var(--glass-bg-subtle);
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
}

.glass-light {
  background: var(--glass-bg-light);
  backdrop-filter: blur(var(--glass-blur-md));
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
  border: 1px solid var(--glass-border);
}

.glass-medium {
  background: var(--glass-bg-medium);
  backdrop-filter: blur(var(--glass-blur-md));
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
  border: 1px solid var(--glass-border-light);
}

.glass-strong {
  background: var(--glass-bg-dark);
  backdrop-filter: blur(var(--glass-blur-lg));
  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
  border: 1px solid var(--glass-border-strong);
}


/* =============================================================================
   COMPONENT TOKENS - Ready-to-use Component Styles
   ============================================================================= */

/* Standard Button Token */
.btn-token {
  padding: var(--padding-button-md);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  transition: all var(--transition-normal);
}

/* Standard Input Token */
.input-token {
  padding: var(--padding-input);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  background: var(--glass-bg-light);
  font-size: var(--text-base);
  color: var(--text-primary);
  transition: all var(--transition-fast);
}

.input-token:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--shadow-glow-primary);
}

/* Standard Card Token */
.card-token {
  padding: var(--padding-card);
  border-radius: var(--radius-lg);
  background: var(--glass-bg-light);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-md);
}

/* Standard Panel Token */
.panel-token {
  padding: var(--padding-panel);
  border-radius: var(--radius-xl);
  background: var(--glass-bg-dark);
  backdrop-filter: blur(var(--glass-blur-lg));
  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
  border: 1px solid var(--glass-border-light);
  box-shadow: var(--shadow-xl);
}