/* ==========================================================================
   KAMEU New - Design System / CSS Variables
   Hybrid: KAMEU-Basis + Electronics-Akzente
   ========================================================================== */

:root {
    /* ── Brand Colors (KAMEU Basis) ── */
    --kn-primary: #1a365d;
    --kn-primary-light: #2c5282;
    --kn-primary-dark: #0f2442;
    --kn-accent: #38a169;
    --kn-accent-light: #68d391;
    --kn-accent-dark: #276749;

    /* ── Electronics Accent Colors (Neu) ── */
    --kn-secondary: #c8952e;
    --kn-secondary-light: #dbb24e;
    --kn-secondary-dark: #a67b1e;
    --kn-tech-blue: #4299e1;
    --kn-tech-blue-light: #63b3ed;
    --kn-tech-dark: #0d1b2a;
    --kn-neon: #00d4ff;
    --kn-deal-red: #c8952e;
    --kn-deal-yellow: #f6e05e;
    --kn-orange: #ed8936;
    --kn-orange-light: #f6ad55;

    /* ── Neutral Colors ── */
    --kn-white: #ffffff;
    --kn-black: #000000;
    --kn-gray-50: #f7fafc;
    --kn-gray-100: #edf2f7;
    --kn-gray-200: #e2e8f0;
    --kn-gray-300: #cbd5e0;
    --kn-gray-400: #a0aec0;
    --kn-gray-500: #718096;
    --kn-gray-600: #4a5568;
    --kn-gray-700: #2d3748;
    --kn-gray-800: #1a202c;
    --kn-bg: #f7fafc;
    --kn-bg-alt: #edf2f7;

    /* ── Status Colors ── */
    --kn-success: #38a169;
    --kn-warning: #f59e0b;
    --kn-error: #dc2626;
    --kn-info: #3b82f6;

    /* ── WooCommerce Colors ── */
    --kn-price: #1a365d;
    --kn-sale-price: #c8952e;
    --kn-old-price: #a0aec0;
    --kn-in-stock: #38a169;
    --kn-low-stock: #f59e0b;
    --kn-out-of-stock: #dc2626;
    --kn-badge-new: #4299e1;
    --kn-badge-sale: #c8952e;
    --kn-badge-hot: #ed8936;

    /* ── Typography ── */
    --kn-font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --kn-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --kn-font-mono: 'SF Mono', 'Fira Code', monospace;

    --kn-text-xs: 0.75rem;
    --kn-text-sm: 0.875rem;
    --kn-text-base: 1rem;
    --kn-text-lg: 1.125rem;
    --kn-text-xl: 1.25rem;
    --kn-text-2xl: 1.5rem;
    --kn-text-3xl: 1.875rem;
    --kn-text-4xl: 2.25rem;
    --kn-text-5xl: 3rem;

    --kn-leading-tight: 1.25;
    --kn-leading-normal: 1.5;
    --kn-leading-relaxed: 1.75;

    --kn-weight-normal: 400;
    --kn-weight-medium: 500;
    --kn-weight-semibold: 600;
    --kn-weight-bold: 700;
    --kn-weight-extrabold: 800;

    /* ── Spacing ── */
    --kn-space-1: 0.25rem;
    --kn-space-2: 0.5rem;
    --kn-space-3: 0.75rem;
    --kn-space-4: 1rem;
    --kn-space-5: 1.25rem;
    --kn-space-6: 1.5rem;
    --kn-space-8: 2rem;
    --kn-space-10: 2.5rem;
    --kn-space-12: 3rem;
    --kn-space-16: 4rem;
    --kn-space-20: 5rem;
    --kn-space-24: 6rem;

    /* ── Layout ── */
    --kn-container-max: 1400px;
    --kn-container-padding: 20px;
    --kn-grid-gap: 1.5rem;

    /* ── Header Heights ── */
    --kn-topbar-height: 44px;
    --kn-header-height: 80px;
    --kn-nav-height: 50px;
    --kn-header-total: 174px;
    --kn-sticky-height: 64px;
    --kn-mobile-bottom-height: 56px;

    /* ── Border Radius ── */
    --kn-radius-xs: 2px;
    --kn-radius-sm: 4px;
    --kn-radius-md: 8px;
    --kn-radius-lg: 12px;
    --kn-radius-xl: 16px;
    --kn-radius-2xl: 24px;
    --kn-radius-full: 9999px;

    /* ── Shadows ── */
    --kn-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --kn-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --kn-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --kn-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --kn-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --kn-shadow-xl: 0 12px 36px rgba(0, 0, 0, 0.15);
    --kn-shadow-2xl: 0 20px 50px rgba(0, 0, 0, 0.2);
    --kn-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
    --kn-shadow-card-hover: 0 8px 25px rgba(0, 0, 0, 0.12);
    --kn-shadow-mega: 0 15px 40px rgba(0, 0, 0, 0.15);

    /* ── Transitions ── */
    --kn-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --kn-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --kn-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --kn-transition-fast: 150ms var(--kn-ease);
    --kn-transition: 250ms var(--kn-ease);
    --kn-transition-slow: 400ms var(--kn-ease);

    /* ── Z-Index Scale ── */
    --kn-z-dropdown: 100;
    --kn-z-sticky: 200;
    --kn-z-mega-menu: 300;
    --kn-z-overlay: 400;
    --kn-z-modal: 500;
    --kn-z-toast: 600;
    --kn-z-mobile-nav: 700;
}

/* ==========================================================================
   Dark Mode (opt-in via body.kn-dark-mode class)
   ========================================================================== */

body.kn-dark-mode {
    --kn-primary: #63b3ed;
    --kn-primary-light: #90cdf4;
    --kn-primary-dark: #4299e1;
    --kn-accent: #68d391;
    --kn-accent-light: #9ae6b4;
    --kn-accent-dark: #48bb78;

    --kn-secondary: #dbb24e;
    --kn-secondary-light: #e8c96e;
    --kn-secondary-dark: #c8952e;
    --kn-tech-blue: #63b3ed;
    --kn-tech-blue-light: #90cdf4;
    --kn-neon: #00d4ff;
    --kn-deal-red: #dbb24e;
    --kn-deal-yellow: #faf089;
    --kn-orange: #f6ad55;
    --kn-orange-light: #fbd38d;

    --kn-white: #1a202c;
    --kn-black: #f7fafc;
    --kn-gray-50: #171923;
    --kn-gray-100: #1a202c;
    --kn-gray-200: #2d3748;
    --kn-gray-300: #4a5568;
    --kn-gray-400: #718096;
    --kn-gray-500: #a0aec0;
    --kn-gray-600: #cbd5e0;
    --kn-gray-700: #e2e8f0;
    --kn-gray-800: #edf2f7;
    --kn-bg: #0d1117;
    --kn-bg-alt: #161b22;

    --kn-price: #90cdf4;
    --kn-sale-price: #dbb24e;
    --kn-old-price: #718096;

    --kn-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --kn-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --kn-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --kn-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
    --kn-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
    --kn-shadow-xl: 0 12px 36px rgba(0, 0, 0, 0.5);
    --kn-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25);
    --kn-shadow-card-hover: 0 8px 25px rgba(0, 0, 0, 0.4);
    --kn-shadow-mega: 0 15px 40px rgba(0, 0, 0, 0.5);

    background-color: var(--kn-bg);
    color: var(--kn-gray-800);
}

body.kn-dark-mode img {
    opacity: 0.92;
}