/**
 * Chrizzly Drumtech - Design Tokens
 * Modern CSS Custom Properties System
 */

:root {
    /* ===================================
       BRAND COLORS
       =================================== */
    --color-primary: #038fd9;
    --color-primary-dark: #026ba3;
    --color-primary-light: #4db3e8;
    --color-primary-rgb: 3, 143, 217;

    /* Accent Colors */
    --color-accent-gold: #ffd700;
    --color-accent-red: #ff4444;
    --color-accent-green: #22c55e;

    /* ===================================
       DARK THEME
       =================================== */
    --color-bg-primary: #0a0a0a;
    --color-bg-secondary: #141414;
    --color-bg-tertiary: #1e1e1e;
    --color-bg-card: #161616;
    --color-bg-elevated: #242424;

    /* ===================================
       TEXT COLORS
       =================================== */
    --color-text-primary: #ffffff;
    --color-text-secondary: #b0b0b0;
    --color-text-muted: #707070;
    --color-text-disabled: #404040;

    /* ===================================
       BORDERS & DIVIDERS
       =================================== */
    --color-border: #2a2a2a;
    --color-border-light: #3a3a3a;
    --color-border-accent: rgba(3, 143, 217, 0.3);

    /* ===================================
       STATUS COLORS
       =================================== */
    --color-success: #22c55e;
    --color-error: #ef4444;
    --color-warning: #f59e0b;
    --color-info: #3b82f6;

    /* ===================================
       SHADOWS
       =================================== */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7);
    --shadow-primary: 0 4px 20px rgba(var(--color-primary-rgb), 0.3);
    --shadow-primary-lg: 0 8px 32px rgba(var(--color-primary-rgb), 0.4);

    /* ===================================
       TYPOGRAPHY
       =================================== */
    --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;

    /* Font Weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;

    /* ===================================
       FLUID TYPOGRAPHY (Responsive)
       =================================== */
    --fs-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --fs-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
    --fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --fs-lg: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
    --fs-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.875rem);
    --fs-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
    --fs-3xl: clamp(2rem, 1.5rem + 2.5vw, 4rem);
    --fs-4xl: clamp(3rem, 2rem + 5vw, 6rem);
    --fs-5xl: clamp(4rem, 3rem + 5vw, 8rem);

    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;

    /* ===================================
       SPACING SYSTEM (8px base)
       =================================== */
    --spacing-unit: 8px;
    --spacing-xs: calc(var(--spacing-unit) * 0.5);   /* 4px */
    --spacing-sm: calc(var(--spacing-unit) * 1);     /* 8px */
    --spacing-md: calc(var(--spacing-unit) * 2);     /* 16px */
    --spacing-lg: calc(var(--spacing-unit) * 3);     /* 24px */
    --spacing-xl: calc(var(--spacing-unit) * 4);     /* 32px */
    --spacing-2xl: calc(var(--spacing-unit) * 6);    /* 48px */
    --spacing-3xl: calc(var(--spacing-unit) * 8);    /* 64px */
    --spacing-4xl: calc(var(--spacing-unit) * 12);   /* 96px */
    --spacing-5xl: calc(var(--spacing-unit) * 16);   /* 128px */

    /* ===================================
       LAYOUT
       =================================== */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1400px;

    --header-height: 80px;
    --footer-height: 200px;

    /* ===================================
       BORDER RADIUS
       =================================== */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* ===================================
       TRANSITIONS
       =================================== */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Easing Functions */
    --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 SCALE
       =================================== */
    --z-base: 0;
    --z-dropdown: 1000;
    --z-sticky: 1100;
    --z-fixed: 1200;
    --z-modal-backdrop: 1300;
    --z-modal: 1400;
    --z-popover: 1500;
    --z-tooltip: 1600;

    /* ===================================
       BREAKPOINTS (for JS)
       =================================== */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;

    /* ===================================
       AFFILIATE COLORS
       =================================== */
    --color-affiliate-thomann: #0066cc;
    --color-affiliate-amazon: #ff9900;
    --color-affiliate-sweetwater: #0066aa;

    /* ===================================
       GRADIENTS
       =================================== */
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    --gradient-gold: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    --gradient-dark: linear-gradient(180deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
}

/* ===================================
   REDUCED MOTION
   =================================== */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-base: 0ms;
        --transition-slow: 0ms;
    }
}

/* ===================================
   HIGH CONTRAST MODE
   =================================== */
@media (prefers-contrast: high) {
    :root {
        --color-border: #555555;
        --color-text-secondary: #dddddd;
    }
}