/* ========================================
   ULTRA THEME - DESIGN TOKENS
   Zentralisierte CSS Variables für konsistentes Design
   Version: 1.0.0
======================================== */

:root {
  /* ========================================
     COLORS - Semantic Color System
  ======================================== */
  
  /* Primary Colors */
  --ultra-black: #111;
  --ultra-black-hover: #000;
  --ultra-black-light: #333;
  --ultra-black-lighter: #444;
  
  /* Accent Colors */
  --ultra-accent: #8B0000;
  --ultra-accent-hover: #A00000;
  --ultra-accent-light: rgba(139, 0, 0, 0.1);
  
  /* Text Colors */
  --ultra-text: #111;
  --ultra-text-muted: #666;
  --ultra-text-light: #999;
  --ultra-text-dark: #222;
  --ultra-text-lighter: #777;
  
  /* Background Colors */
  --ultra-bg: #fff;
  --ultra-bg-light: #f8f9fa;
  --ultra-bg-muted: #f1f1f1;
  --ultra-bg-dark: #fafafa;
  --ultra-bg-secondary: #e9ecef;
  
  /* Border Colors */
  --ultra-border: #e7e7e7;
  --ultra-border-light: #f0f0f0;
  --ultra-border-dark: #ddd;
  --ultra-border-darker: #ccc;
  --ultra-border-focus: #111;
  
  /* State Colors */
  --ultra-success: #28a745;
  --ultra-error: #dc3545;
  --ultra-warning: #ffc107;
  --ultra-info: #17a2b8;
  
  /* ========================================
     SPACING - Consistent Scale
  ======================================== */
  
  --ultra-space-0: 0px;
  --ultra-space-2: 2px;
  --ultra-space-4: 4px;
  --ultra-space-6: 6px;
  --ultra-space-8: 8px;
  --ultra-space-10: 10px;
  --ultra-space-12: 12px;
  --ultra-space-14: 14px;
  --ultra-space-16: 16px;
  --ultra-space-18: 18px;
  --ultra-space-20: 20px;
  --ultra-space-22: 22px;
  --ultra-space-24: 24px;
  --ultra-space-28: 28px;
  --ultra-space-30: 30px;
  --ultra-space-32: 32px;
  --ultra-space-36: 36px;
  --ultra-space-40: 40px;
  --ultra-space-44: 44px;
  --ultra-space-48: 48px;
  --ultra-space-52: 52px;
  --ultra-space-56: 56px;
  --ultra-space-60: 60px;
  --ultra-space-64: 64px;
  --ultra-space-72: 72px;
  --ultra-space-80: 80px;
  --ultra-space-96: 96px;
  --ultra-space-120: 120px;
  
  /* ========================================
     TYPOGRAPHY
  ======================================== */
  
  /* Font Family */
  --ultra-font-primary: "Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  
  /* Font Sizes */
  --ultra-text-xs: 0.75rem;    /* 12px */
  --ultra-text-sm: 0.875rem;   /* 14px */
  --ultra-text-base: 1rem;     /* 16px */
  --ultra-text-lg: 1.125rem;   /* 18px */
  --ultra-text-xl: 1.25rem;    /* 20px */
  --ultra-text-2xl: 1.5rem;    /* 24px */
  --ultra-text-3xl: 1.875rem;  /* 30px */
  --ultra-text-4xl: 2.25rem;   /* 36px */
  --ultra-text-5xl: 3rem;      /* 48px */
  
  /* Font Weights - Noto Sans Variable */
  --ultra-weight-light: 300;
  --ultra-weight-normal: 400;
  --ultra-weight-medium: 500;
  --ultra-weight-semibold: 600;
  --ultra-weight-bold: 700;
  
  /* Line Heights */
  --ultra-leading-none: 1;
  --ultra-leading-tight: 1.25;
  --ultra-leading-normal: 1.5;
  --ultra-leading-relaxed: 1.625;
  
  /* ========================================
     BORDER RADIUS
  ======================================== */
  
  --ultra-radius-none: 0px;
  --ultra-radius-xs: 4px;
  --ultra-radius-sm: 6px;
  --ultra-radius-md: 8px;
  --ultra-radius-lg: 10px;
  --ultra-radius-xl: 12px;
  --ultra-radius-2xl: 14px;
  --ultra-radius-3xl: 16px;
  --ultra-radius-4xl: 20px;
  --ultra-radius-full: 9999px;
  
  /* ========================================
     SHADOWS - Layered Elevation System
  ======================================== */
  
  --ultra-shadow-none: none;
  --ultra-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
  --ultra-shadow-sm: 0 1px 8px rgba(0, 0, 0, 0.04);
  --ultra-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --ultra-shadow-lg: 0 8px 22px rgba(0, 0, 0, 0.12);
  --ultra-shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.16);
  --ultra-shadow-2xl: 0 24px 60px rgba(0, 0, 0, 0.2);
  
  /* Special Shadows */
  --ultra-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
  --ultra-shadow-focus: 0 0 0 3px rgba(17, 17, 17, 0.1);
  --ultra-shadow-accent: 0 8px 24px rgba(139, 0, 0, 0.15);
  
  /* ========================================
     TRANSITIONS & ANIMATIONS
  ======================================== */
  
  /* Duration */
  --ultra-duration-fast: 0.15s;
  --ultra-duration-normal: 0.2s;
  --ultra-duration-slow: 0.3s;
  --ultra-duration-slower: 0.4s;
  
  /* Easing */
  --ultra-ease-linear: linear;
  --ultra-ease-in: ease-in;
  --ultra-ease-out: ease-out;
  --ultra-ease-in-out: ease-in-out;
  --ultra-ease-bounce: cubic-bezier(0.4, 0, 0.2, 1);
  --ultra-ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Combined Transitions */
  --ultra-transition-fast: var(--ultra-duration-fast) var(--ultra-ease-out);
  --ultra-transition-normal: var(--ultra-duration-normal) var(--ultra-ease-out);
  --ultra-transition-slow: var(--ultra-duration-slow) var(--ultra-ease-out);
  --ultra-transition-bounce: var(--ultra-duration-slower) var(--ultra-ease-bounce);
  
  /* ========================================
     Z-INDEX SCALE - Layering System
  ======================================== */
  
  --ultra-z-base: 1;
  --ultra-z-docked: 10;
  --ultra-z-dropdown: 1000;
  --ultra-z-sticky: 1020;
  --ultra-z-banner: 1030;
  --ultra-z-overlay: 1040;
  --ultra-z-modal: 1050;
  --ultra-z-popover: 1060;
  --ultra-z-skiplink: 1070;
  --ultra-z-tooltip: 1080;
  --ultra-z-max: 2147483647;
  
  /* ========================================
     LAYOUT & CONTAINERS
  ======================================== */
  
  /* Container Sizes */
  --ultra-container-sm: 640px;
  --ultra-container-md: 768px;
  --ultra-container-lg: 1024px;
  --ultra-container-xl: 1280px;
  --ultra-container-2xl: 1536px;
  --ultra-container-ultra: 1680px;
  
  /* Grid Gap */
  --ultra-gap-sm: var(--ultra-space-12);
  --ultra-gap-md: var(--ultra-space-16);
  --ultra-gap-lg: var(--ultra-space-20);
  --ultra-gap-xl: var(--ultra-space-24);
  
  /* ========================================
     COMPONENT SPECIFIC
  ======================================== */
  
  /* Buttons */
  --ultra-button-height: var(--ultra-space-44);
  --ultra-button-height-sm: var(--ultra-space-36);
  --ultra-button-height-lg: var(--ultra-space-52);
  --ultra-button-padding-x: var(--ultra-space-16);
  --ultra-button-padding-y: var(--ultra-space-12);
  
  /* Cards */
  --ultra-card-padding: var(--ultra-space-16);
  --ultra-card-radius: var(--ultra-radius-2xl);
  --ultra-card-border: 1px solid var(--ultra-border);
  
  /* Forms */
  --ultra-input-height: var(--ultra-space-44);
  --ultra-input-padding-x: var(--ultra-space-12);
  --ultra-input-border: 1px solid var(--ultra-border-dark);
  --ultra-input-focus-border: 1px solid var(--ultra-border-focus);
  
  /* ========================================
     BREAKPOINTS - For JS/Media Queries
  ======================================== */
  
  --ultra-bp-sm: 640px;
  --ultra-bp-md: 768px;
  --ultra-bp-lg: 1024px;
  --ultra-bp-xl: 1280px;
  --ultra-bp-2xl: 1536px;
}

/* ========================================
   DARK MODE SUPPORT - Ready for Future
======================================== */

@media (prefers-color-scheme: dark) {
  :root {
    /* Override colors for dark mode */
    --ultra-bg: #0f0f0f;
    --ultra-bg-light: #1a1a1a;
    --ultra-bg-muted: #2a2a2a;
    --ultra-bg-dark: #1f1f1f;
    
    --ultra-text: #f5f5f5;
    --ultra-text-muted: #a3a3a3;
    --ultra-text-light: #8a8a8a;
    --ultra-text-dark: #e5e5e5;
    
    --ultra-border: #333;
    --ultra-border-light: #404040;
    --ultra-border-dark: #555;
    --ultra-border-darker: #666;
    
    /* Enhanced shadows for dark mode */
    --ultra-shadow-sm: 0 1px 8px rgba(0, 0, 0, 0.3);
    --ultra-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --ultra-shadow-lg: 0 8px 22px rgba(0, 0, 0, 0.5);
  }
}

/* ========================================
   REDUCED MOTION SUPPORT
======================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --ultra-duration-fast: 0.01ms;
    --ultra-duration-normal: 0.01ms;
    --ultra-duration-slow: 0.01ms;
    --ultra-duration-slower: 0.01ms;
    
    --ultra-transition-fast: none;
    --ultra-transition-normal: none;
    --ultra-transition-slow: none;
    --ultra-transition-bounce: none;
  }
}