/* ==========================================================================
   CSS VARIABLES - Smart Business Solutions
   Zentrale Design-Tokens für konsistentes Styling
   ========================================================================== */

:root {
    /* ==================== FARBEN ==================== */

    /* Primaerfarben */
    --primary-cyan: #00ffff;
    --primary-purple: #8b5cf6;
    --primary-blue: #0080ff;

    /* Cyan Opacity Varianten */
    --cyan-5: rgba(0, 255, 255, 0.05);
    --cyan-8: rgba(0, 255, 255, 0.08);
    --cyan-10: rgba(0, 255, 255, 0.1);
    --cyan-12: rgba(0, 255, 255, 0.12);
    --cyan-15: rgba(0, 255, 255, 0.15);
    --cyan-20: rgba(0, 255, 255, 0.2);
    --cyan-25: rgba(0, 255, 255, 0.25);
    --cyan-30: rgba(0, 255, 255, 0.3);
    --cyan-35: rgba(0, 255, 255, 0.35);
    --cyan-50: rgba(0, 255, 255, 0.5);
    --cyan-75: rgba(0, 255, 255, 0.75);

    /* Purple Opacity Varianten */
    --purple-10: rgba(139, 92, 246, 0.1);
    --purple-15: rgba(139, 92, 246, 0.15);
    --purple-20: rgba(139, 92, 246, 0.2);
    --purple-30: rgba(139, 92, 246, 0.3);

    /* Hintergrund-Farben */
    --bg-dark: #030712;
    --bg-dark-95: rgba(3, 7, 18, 0.95);
    --bg-dark-85: rgba(3, 7, 18, 0.85);
    --bg-card: rgba(10, 15, 30, 0.8);
    --bg-overlay: rgba(0, 0, 0, 0.5);

    /* Text-Farben */
    --text-white: #ffffff;
    --text-light: rgba(255, 255, 255, 0.9);
    --text-muted: rgba(255, 255, 255, 0.7);
    --text-subtle: rgba(255, 255, 255, 0.6);

    /* Status-Farben */
    --success: #25d366;
    --error: #ff6b6b;
    --warning: #ffd700;
    --info: #00d4ff;

    /* ==================== GRADIENTS ==================== */

    --gradient-cyan-purple: linear-gradient(135deg, #00ffff, #8b5cf6);
    --gradient-cyan-blue: linear-gradient(120deg, #00ffff 0%, #0080ff 100%);
    --gradient-purple-cyan: linear-gradient(135deg, #8b5cf6, #00ffff);
    --gradient-dark: linear-gradient(180deg, rgba(3, 7, 18, 0.95) 0%, rgba(3, 7, 18, 0.85) 100%);
    --gradient-card: linear-gradient(145deg, rgba(0, 255, 255, 0.08), rgba(139, 92, 246, 0.08));
    --gradient-hero-text: linear-gradient(90deg, #00ffff, #8b5cf6, #00ffff);

    /* ==================== SCHATTEN ==================== */

    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.4);

    --shadow-glow-sm: 0 8px 20px rgba(0, 255, 255, 0.15);
    --shadow-glow-md: 0 12px 28px rgba(0, 255, 255, 0.2);
    --shadow-glow-lg: 0 20px 40px rgba(0, 255, 255, 0.25);
    --shadow-glow-xl: 0 24px 60px rgba(0, 255, 255, 0.3);

    --shadow-inset: inset 0 0 20px rgba(0, 255, 255, 0.35);
    --shadow-inset-light: inset 0 0 15px rgba(0, 255, 255, 0.2);

    --shadow-button: 0 14px 32px rgba(0, 255, 255, 0.24);
    --shadow-button-hover: 0 18px 42px rgba(0, 255, 255, 0.32);

    /* ==================== BORDER-RADIUS ==================== */

    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 15px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 999px;

    /* ==================== SPACING ==================== */

    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-2xl: 3rem;     /* 48px */
    --space-3xl: 4rem;     /* 64px */

    /* ==================== TRANSITIONS ==================== */

    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* ==================== TYPOGRAPHY ==================== */

    --font-primary: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-display: 'Poppins', 'Inter', sans-serif;
    --font-mono: 'Fira Code', 'Consolas', monospace;

    --font-size-xs: 0.75rem;   /* 12px */
    --font-size-sm: 0.875rem;  /* 14px */
    --font-size-base: 1rem;    /* 16px */
    --font-size-lg: 1.125rem;  /* 18px */
    --font-size-xl: 1.25rem;   /* 20px */
    --font-size-2xl: 1.5rem;   /* 24px */
    --font-size-3xl: 2rem;     /* 32px */
    --font-size-4xl: 2.5rem;   /* 40px */
    --font-size-5xl: 3rem;     /* 48px */

    --line-height-tight: 1.2;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.75;

    /* ==================== Z-INDEX ==================== */

    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-fixed: 1000;
    --z-modal-backdrop: 9000;
    --z-modal: 9500;
    --z-tooltip: 10000;
    --z-toast: 10500;

    /* ==================== BREAKPOINTS (für JS) ==================== */

    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1400px;

    /* ==================== CONTAINER ==================== */

    --container-sm: 540px;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1140px;
    --container-2xl: 1320px;
}

/* Dark Mode Default - bereits dunkel, aber für Konsistenz */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }
}