/**
 * Design Tokens: Die Vertriebswikinger
 * 
 * Farbsystem basierend auf ELO Corporate Design
 * Premium Look: Schwarz + Gold + Weiß
 * 
 * @package VertriebsWikinger
 */

:root {
    /* ========================================
       FARBEN (ELO Design System)
       ======================================== */
    
    /* Primärfarben - Schwarz als Basis */
    --farbe-schwarz: #000000;
    --farbe-schwarz-rgb: 0, 0, 0;
    --farbe-schwarz-hell: #0A0A0A;
    --farbe-schwarz-soft: #1A1A1A;
    
    /* Legacy-Alias für Kompatibilität */
    --farbe-navy: #000000;
    --farbe-navy-rgb: 0, 0, 0;
    --farbe-navy-hell: #1A1A1A;
    --farbe-navy-dunkel: #000000;
    
    /* Akzentfarben - Kupfer */
    --farbe-gold: #C86F27;
    --farbe-gold-rgb: 245, 166, 35;
    --farbe-gold-hell: #FFBA42;
    --farbe-gold-dunkel: #D4941C;
    
    /* Legacy-Alias für Kompatibilität */
    --farbe-kupfer: #C86F27;
    --farbe-kupfer-rgb: 245, 166, 35;
    --farbe-kupfer-hell: #FFBA42;
    --farbe-kupfer-dunkel: #D4941C;
    
    /* Sekundärfarbe - Wikinger Blau (aus Hero-Bild) */
    --farbe-blau: #5A7A94;
    --farbe-blau-rgb: 90, 122, 148;
    --farbe-blau-dunkel: #2C4A6E;
    --farbe-blau-hell: #6B8BA4;
    
    /* Neutrale Farben */
    --farbe-weiss: #FFFFFF;
    --farbe-weiss-rgb: 255, 255, 255;
    --farbe-weiss-warm: #F5F5F5;
    --farbe-weiss-dunkel: #E8E8E8;
    
    --farbe-grau: #D9D9D9;
    --farbe-grau-rgb: 217, 217, 217;
    --farbe-grau-dunkel: #666666;
    --farbe-grau-sehr-dunkel: #333333;
    --farbe-grau-hell: #ECECEC;
    
    /* Transparenzen */
    --farbe-schwarz-alpha-90: rgba(0, 0, 0, 0.9);
    --farbe-schwarz-alpha-80: rgba(0, 0, 0, 0.8);
    --farbe-schwarz-alpha-60: rgba(0, 0, 0, 0.6);
    --farbe-schwarz-alpha-20: rgba(0, 0, 0, 0.2);
    --farbe-gold-alpha-20: rgba(245, 166, 35, 0.2);
    --farbe-gold-alpha-15: rgba(245, 166, 35, 0.15);
    --farbe-weiss-alpha-95: rgba(255, 255, 255, 0.95);
    --farbe-weiss-alpha-75: rgba(255, 255, 255, 0.75);
    --farbe-weiss-alpha-60: rgba(255, 255, 255, 0.6);
    
    /* Legacy-Alias für Kompatibilität */
    --farbe-navy-alpha-90: rgba(0, 0, 0, 0.9);
    --farbe-navy-alpha-80: rgba(0, 0, 0, 0.8);
    --farbe-navy-alpha-20: rgba(0, 0, 0, 0.2);
    --farbe-kupfer-alpha-20: rgba(245, 166, 35, 0.2);
    
    /* ========================================
       SPACING (rem-basiert)
       ======================================== */
    
    --abstand-xs: 0.25rem;      /* 4px */
    --abstand-sm: 0.5rem;       /* 8px */
    --abstand-md: 1rem;         /* 16px */
    --abstand-lg: 1.5rem;       /* 24px */
    --abstand-xl: 2rem;         /* 32px */
    --abstand-2xl: 3rem;        /* 48px */
    --abstand-3xl: 4rem;        /* 64px */
    --abstand-4xl: 6rem;        /* 96px */
    --abstand-5xl: 8rem;        /* 128px */
    --abstand-6xl: 12rem;       /* 192px */
    
    /* Responsive Spacing mit clamp() */
    --abstand-sektion: clamp(3rem, 8vw, 8rem);
    --abstand-container: clamp(1rem, 5vw, 6rem);
    
    /* ========================================
       CONTAINER & VIEWPORT
       ======================================== */
    
    --container-sm: 40rem;      /* 640px */
    --container-md: 48rem;      /* 768px */
    --container-lg: 64rem;      /* 1024px */
    --container-xl: 80rem;      /* 1280px */
    --container-2xl: 96rem;     /* 1536px */
    
    --container-fluid: clamp(1rem, 95vw, 80rem);
    --container-text: clamp(1rem, 90vw, 48rem);
    
    --vh-vollbild: 100vh;
    --vh-hero: 100vh;
    --vh-sektion: 80vh;
    
    /* ========================================
       TYPOGRAFIE
       ======================================== */
    
    /* Schriftarten */
    --schrift-primaer: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --schrift-sekundaer: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --schrift-mono: 'Roboto Mono', 'Courier New', monospace;
    
    /* Schriftgrößen (fluid) */
    --schrift-xs: 0.75rem;      /* 12px */
    --schrift-sm: 0.875rem;     /* 14px */
    --schrift-basis: 1rem;      /* 16px */
    --schrift-lg: 1.125rem;     /* 18px */
    --schrift-xl: 1.25rem;      /* 20px */
    --schrift-2xl: 1.5rem;      /* 24px */
    --schrift-3xl: 1.875rem;    /* 30px */
    --schrift-4xl: 2.25rem;     /* 36px */
    --schrift-5xl: 3rem;        /* 48px */
    --schrift-6xl: 3.75rem;     /* 60px */
    
    /* Schriftstärken */
    --schrift-leicht: 300;
    --schrift-normal: 400;
    --schrift-medium: 500;
    --schrift-halbfett: 600;
    --schrift-fett: 700;
    --schrift-extrafett: 800;
    
    /* Zeilenhöhen */
    --zeilenhoehe-eng: 1.2;
    --zeilenhoehe-snug: 1.375;
    --zeilenhoehe-normal: 1.5;
    --zeilenhoehe-entspannt: 1.625;
    --zeilenhoehe-locker: 2;
    
    /* ========================================
       BORDER & RADIUS
       ======================================== */
    
    --radius-sm: 0.25rem;       /* 4px */
    --radius-md: 0.5rem;        /* 8px */
    --radius-lg: 0.75rem;       /* 12px */
    --radius-xl: 1rem;          /* 16px */
    --radius-2xl: 1.5rem;       /* 24px */
    --radius-3xl: 2rem;         /* 32px */
    --radius-voll: 9999px;      /* Fully rounded */
    
    /* ========================================
       SHADOWS (angepasst an Schwarz-Basis)
       ======================================== */
    
    --schatten-sm: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.1);
    --schatten-md: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.15);
    --schatten-lg: 0 0.625rem 0.9375rem rgba(0, 0, 0, 0.2);
    --schatten-xl: 0 1.25rem 1.5625rem rgba(0, 0, 0, 0.25);
    --schatten-2xl: 0 1.5625rem 3.125rem rgba(0, 0, 0, 0.35);
    
    --schatten-gold: 0 0.25rem 0.75rem rgba(245, 166, 35, 0.3);
    --schatten-gold-glow: 0 0 1.5rem rgba(245, 166, 35, 0.4);
    --schatten-schwarz: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
    
    /* Legacy-Alias */
    --schatten-kupfer: 0 0.25rem 0.75rem rgba(245, 166, 35, 0.3);
    --schatten-navy: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
    
    /* ========================================
       TRANSITIONS & ANIMATIONS
       ======================================== */
    
    --transition-schnell: 150ms;
    --transition-basis: 300ms;
    --transition-langsam: 500ms;
    
    --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);
    
    /* ========================================
       Z-INDEX (Layering)
       ======================================== */
    
    --z-basis: 1;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    
    /* ========================================
       NAVIGATION-SPEZIFISCH
       ======================================== */
    
    --navigation-hoehe: 5rem;           /* 80px */
    --navigation-hoehe-sticky: 4rem;    /* 64px beim Scrollen */
    --mega-menu-breite: var(--container-xl);
    --mega-menu-abstand: 1.5rem;
}

/* ========================================
   DARK MODE VORBEREITUNG (optional)
   ======================================== */

@media (prefers-color-scheme: dark) {
    :root {
        /* Könnte später für Dark Mode genutzt werden */
    }
}

/* Dark Mode via data-theme Attribut */
[data-theme="dark"] {
    /* Hintergrund invertieren */
    --farbe-hintergrund: #0A0A0A;
    --farbe-hintergrund-rgb: 10, 10, 10;
    --farbe-hintergrund-hell: #1A1A1A;
    
    /* Text invertieren */
    --farbe-text: #FFFFFF;
    --farbe-text-rgb: 255, 255, 255;
    --farbe-text-soft: rgba(255, 255, 255, 0.7);
    --farbe-text-muted: rgba(255, 255, 255, 0.5);
    
    /* Akzent bleibt gleich */
    --farbe-gold: #C86F27;
    
    /* Karten/Elemente */
    --farbe-karte: #1A1A1A;
    --farbe-karte-border: rgba(255, 255, 255, 0.1);
    
    /* Schatten für Dark Mode */
    --schatten-s: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
    --schatten-m: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.4);
    --schatten-l: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
}

/* Light Mode Defaults (explizit) */
[data-theme="light"],
:root:not([data-theme]) {
    --farbe-hintergrund: #FFFFFF;
    --farbe-hintergrund-rgb: 255, 255, 255;
    --farbe-hintergrund-hell: #F5F5F5;
    
    --farbe-text: #000000;
    --farbe-text-rgb: 0, 0, 0;
    --farbe-text-soft: rgba(0, 0, 0, 0.7);
    --farbe-text-muted: rgba(0, 0, 0, 0.5);
    
    --farbe-karte: #FFFFFF;
    --farbe-karte-border: rgba(0, 0, 0, 0.1);
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    :root {
        --farbe-navy: #000;
        --farbe-kupfer: #000;
        --farbe-weiss: #fff;
    }
}