/**
 * Team Exciting - Premium Design System
 * CSS Custom Properties (Variables)
 * Version: 2.0.0
 * Date: 2025-11-20
 *
 * This file contains all design tokens for the premium gaming/eSports theme.
 * All values can be dynamically overridden via WordPress Customizer.
 */

/* Dark Mode Variables (Default) */
:root,
[data-theme="dark"],
html[data-theme="dark"],
body[data-theme="dark"] {
    /* ============================================
       COLOR SYSTEM - Premium Gaming Palette
       ============================================ */

    /* Primary Colors (Customizer-Driven) - Elegant Gold/Orange */
    --color-primary: #FFA726; /* Elegant Orange - Main CTA color */
    --color-primary-rgb: 255, 167, 38;
    --color-primary-dark: #F57C00;
    --color-primary-light: #FFB74D;

    --color-secondary: #42A5F5; /* Elegant Blue - Secondary accents */
    --color-secondary-rgb: 66, 165, 245;
    --color-secondary-dark: #1E88E5;
    --color-secondary-light: #64B5F6;

    /* Background Colors - Elegant Dark Theme */
    --color-bg-primary: #0F1419; /* Primary background */
    --color-bg-dark: #0F1419; /* Deep charcoal - Main background */
    --color-bg-darker: #0A0D11; /* Deepest black for contrast */
    --color-bg-medium: #1A1F26; /* Elevated surfaces - Cards, panels */
    --color-bg-light: #252B35; /* Hover states - subtle lift */
    --color-bg-lighter: #2F3640; /* Active states - clear interaction */

    /* Accent Colors - Elegant Premium */
    --color-accent-teal: #26A69A; /* Elegant teal */
    --color-accent-teal-rgb: 38, 166, 154;
    --color-accent-purple: #AB47BC; /* Refined purple */
    --color-accent-purple-rgb: 171, 71, 188;
    --color-accent-gold: #FFD54F; /* Premium gold */
    --color-accent-gold-rgb: 255, 213, 79;
    --color-accent-rose: #EC407A; /* Elegant rose */
    --color-accent-rose-rgb: 236, 64, 122;

    /* Status Colors - Elegant Refined */
    --color-success: #66BB6A; /* Elegant success green */
    --color-success-rgb: 102, 187, 106;
    --color-warning: #FFA726; /* Elegant warning orange */
    --color-warning-rgb: 255, 167, 38;
    --color-error: #EF5350; /* Refined error red */
    --color-error-rgb: 239, 83, 80;
    --color-info: #29B6F6; /* Elegant info blue */
    --color-info-rgb: 41, 182, 246;

    /* Text Colors */
    --color-text-primary: #FFFFFF; /* Main text */
    --color-text-secondary: rgba(255, 255, 255, 0.8); /* Secondary text */
    --color-text-muted: rgba(255, 255, 255, 0.6); /* Muted text */
    --color-text-disabled: rgba(255, 255, 255, 0.4); /* Disabled text */
    --color-text-heading: #FFFFFF; /* Headings - can be customizer driven */

    /* Border Colors */
    --color-border-subtle: rgba(255, 255, 255, 0.1); /* Subtle borders */
    --color-border-medium: rgba(255, 255, 255, 0.2); /* Medium borders */
    --color-border-strong: rgba(255, 255, 255, 0.3); /* Strong borders */
    --color-border-primary: var(--color-primary); /* Primary borders */

    /* Overlay Colors */
    --color-overlay-dark: rgba(10, 14, 39, 0.8); /* Dark overlay */
    --color-overlay-darker: rgba(10, 14, 39, 0.95); /* Darker overlay */
    --color-overlay-light: rgba(255, 255, 255, 0.05); /* Light overlay */


    /* ============================================
       TYPOGRAPHY SYSTEM - Gaming Fonts
       ============================================ */

    /* Font Families */
    --font-display: 'Rajdhani', 'Exo 2', 'Teko', sans-serif; /* Display/Headlines */
    --font-body: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif; /* Body text */
    --font-mono: 'Fira Code', 'Source Code Pro', 'Roboto Mono', monospace; /* Stats/Numbers */

    /* Font Sizes - Fluid Typography (Mobile → Desktop) */
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); /* 12px → 14px */
    --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); /* 14px → 16px */
    --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem); /* 16px → 18px */
    --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.25rem); /* 18px → 20px */
    --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem); /* 20px → 24px */
    --text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem); /* 24px → 32px */
    --text-3xl: clamp(2rem, 1.5rem + 2.5vw, 3rem); /* 32px → 48px */
    --text-4xl: clamp(2.5rem, 2rem + 2.5vw, 4rem); /* 40px → 64px */
    --text-5xl: clamp(3rem, 2.5rem + 2.5vw, 5rem); /* 48px → 80px */

    /* Font Weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;

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

    /* Letter Spacing */
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;


    /* ============================================
       SPACING SYSTEM - 8px Grid
       ============================================ */

    --space-0: 0;
    --space-px: 1px;
    --space-0-5: 0.125rem; /* 2px */
    --space-1: 0.25rem; /* 4px */
    --space-1-5: 0.375rem; /* 6px */
    --space-2: 0.5rem; /* 8px */
    --space-2-5: 0.625rem; /* 10px */
    --space-3: 0.75rem; /* 12px */
    --space-3-5: 0.875rem; /* 14px */
    --space-4: 1rem; /* 16px */
    --space-5: 1.25rem; /* 20px */
    --space-6: 1.5rem; /* 24px */
    --space-7: 1.75rem; /* 28px */
    --space-8: 2rem; /* 32px */
    --space-9: 2.25rem; /* 36px */
    --space-10: 2.5rem; /* 40px */
    --space-11: 2.75rem; /* 44px */
    --space-12: 3rem; /* 48px */
    --space-14: 3.5rem; /* 56px */
    --space-16: 4rem; /* 64px */
    --space-18: 4.5rem; /* 72px */
    --space-20: 5rem; /* 80px */
    --space-24: 6rem; /* 96px */
    --space-28: 7rem; /* 112px */
    --space-32: 8rem; /* 128px */
    --space-36: 9rem; /* 144px */
    --space-40: 10rem; /* 160px */
    --space-48: 12rem; /* 192px */
    --space-56: 14rem; /* 224px */
    --space-64: 16rem; /* 256px */


    /* ============================================
       BORDER RADIUS - Modern Rounding
       ============================================ */

    --radius-none: 0;
    --radius-sm: 0.25rem; /* 4px */
    --radius-base: 0.5rem; /* 8px */
    --radius-md: 0.75rem; /* 12px */
    --radius-lg: 1rem; /* 16px */
    --radius-xl: 1.25rem; /* 20px */
    --radius-2xl: 1.5rem; /* 24px */
    --radius-3xl: 2rem; /* 32px */
    --radius-full: 9999px; /* Fully rounded */


    /* ============================================
       SHADOW SYSTEM - Gaming Glow Effects
       ============================================ */

    /* Standard Shadows */
    --shadow-none: none;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-base: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);

    /* Inner Shadows */
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.4);
    --shadow-inner-lg: inset 0 4px 8px 0 rgba(0, 0, 0, 0.5);

    /* Glow Shadows - Gaming Effects */
    --shadow-glow-primary: 0 0 20px rgba(var(--color-primary-rgb), 0.3);
    --shadow-glow-primary-md: 0 0 30px rgba(var(--color-primary-rgb), 0.4);
    --shadow-glow-primary-lg: 0 0 40px rgba(var(--color-primary-rgb), 0.5);

    --shadow-glow-secondary: 0 0 20px rgba(var(--color-secondary-rgb), 0.3);
    --shadow-glow-secondary-md: 0 0 30px rgba(var(--color-secondary-rgb), 0.4);
    --shadow-glow-secondary-lg: 0 0 40px rgba(var(--color-secondary-rgb), 0.5);

    --shadow-glow-cyan: 0 0 20px rgba(var(--color-accent-cyan-rgb), 0.3);
    --shadow-glow-cyan-md: 0 0 30px rgba(var(--color-accent-cyan-rgb), 0.4);
    --shadow-glow-cyan-lg: 0 0 40px rgba(var(--color-accent-cyan-rgb), 0.5);

    --shadow-glow-purple: 0 0 20px rgba(var(--color-accent-purple-rgb), 0.3);
    --shadow-glow-purple-md: 0 0 30px rgba(var(--color-accent-purple-rgb), 0.4);
    --shadow-glow-purple-lg: 0 0 40px rgba(var(--color-accent-purple-rgb), 0.5);

    --shadow-glow-success: 0 0 20px rgba(var(--color-success-rgb), 0.3);
    --shadow-glow-error: 0 0 20px rgba(var(--color-error-rgb), 0.3);


    /* ============================================
       ANIMATION SYSTEM - Smooth Transitions
       ============================================ */

    /* Durations */
    --duration-instant: 0ms;
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 350ms;
    --duration-slower: 500ms;
    --duration-slowest: 750ms;

    /* Timing Functions */
    --ease-linear: linear;
    --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);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);

    /* Common Transitions */
    --transition-fast: var(--duration-fast) var(--ease-in-out);
    --transition-base: var(--duration-base) var(--ease-in-out);
    --transition-slow: var(--duration-slow) var(--ease-in-out);
    --transition-all: all var(--duration-base) var(--ease-in-out);
    --transition-colors: background-color var(--duration-base) var(--ease-in-out),
                         border-color var(--duration-base) var(--ease-in-out),
                         color var(--duration-base) var(--ease-in-out);
    --transition-transform: transform var(--duration-base) var(--ease-in-out);
    --transition-opacity: opacity var(--duration-base) var(--ease-in-out);


    /* ============================================
       Z-INDEX SYSTEM - Layer Management
       ============================================ */

    --z-negative: -1;
    --z-0: 0;
    --z-10: 10;
    --z-20: 20;
    --z-30: 30;
    --z-40: 40;
    --z-50: 50;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-notification: 1080;
    --z-max: 9999;


    /* ============================================
       BREAKPOINTS - Responsive Design
       ============================================ */

    /* Mobile First Approach */
    --screen-xs: 320px;
    --screen-sm: 640px; /* Small tablets */
    --screen-md: 768px; /* Tablets */
    --screen-lg: 1024px; /* Desktop */
    --screen-xl: 1280px; /* Wide desktop */
    --screen-2xl: 1536px; /* Ultra wide */

    /* Container Max Widths */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;


    /* ============================================
       COMPONENT SPECIFIC VARIABLES
       ============================================ */

    /* Buttons */
    --btn-height-sm: 32px;
    --btn-height-md: 40px;
    --btn-height-lg: 48px;
    --btn-height-xl: 56px;

    --btn-padding-x-sm: var(--space-3);
    --btn-padding-x-md: var(--space-4);
    --btn-padding-x-lg: var(--space-6);
    --btn-padding-x-xl: var(--space-8);

    /* Cards */
    --card-bg: var(--color-bg-medium);
    --card-border: var(--color-border-subtle);
    --card-shadow: var(--shadow-md);
    --card-shadow-hover: var(--shadow-lg);
    --card-radius: var(--radius-lg);
    --card-padding: var(--space-6);

    /* Forms */
    --input-bg: var(--color-bg-light);
    --input-border: var(--color-border-medium);
    --input-border-focus: var(--color-primary);
    --input-height: 44px;
    --input-padding-x: var(--space-4);
    --input-radius: var(--radius-base);

    /* Header/Navigation */
    --header-height: 80px;
    --header-height-mobile: 64px;
    --nav-item-padding: var(--space-4);

    /* Sidebar */
    --sidebar-width: 300px;
    --sidebar-width-collapsed: 80px;

    /* Grid */
    --grid-gap: var(--space-6);
    --grid-gap-sm: var(--space-4);
    --grid-gap-lg: var(--space-8);
}


/* ============================================
   DARK MODE (Default)
   ============================================ */

body {
    background-color: var(--color-bg-dark);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}


/* ============================================
   UTILITY CLASSES - Quick Access
   ============================================ */

/* Text Colors */
.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-muted { color: var(--color-text-muted) !important; }

/* .text-white - Theme-aware */
[data-theme="dark"] .text-white { color: #FFFFFF !important; }
/* ============================================
   LIGHT MODE THEME
   ============================================ */
[data-theme="light"],
html[data-theme="light"],
body[data-theme="light"],
body.light-mode {
    /* Background Colors - Light Theme */
    --color-bg-primary: #FFFFFF;
    --color-bg-dark: #F5F5F5;
    --color-bg-darker: #EEEEEE;
    --color-bg-medium: #FAFAFA;
    --color-bg-light: #FFFFFF;
    --color-bg-lighter: #F9F9F9;

    /* Text Colors - Light Theme */
    --color-text-primary: #212121;
    --color-text-secondary: rgba(0, 0, 0, 0.87);
    --color-text-muted: rgba(0, 0, 0, 0.6);
    --color-text-disabled: rgba(0, 0, 0, 0.38);
    --color-text-heading: #000000;

    /* Border Colors - Light Theme */
    --color-border-subtle: rgba(0, 0, 0, 0.08);
    --color-border-medium: rgba(0, 0, 0, 0.12);
    --color-border-strong: rgba(0, 0, 0, 0.2);

    /* Overlay Colors - Light Theme */
    --color-overlay-dark: rgba(255, 255, 255, 0.9);
    --color-overlay-darker: rgba(255, 255, 255, 0.95);
    --color-overlay-light: rgba(0, 0, 0, 0.05);

    /* Primary/Secondary stay the same but might need contrast adjustments */
    --color-primary: #FF9800;
    --color-primary-dark: #F57C00;
    --color-primary-light: #FFB74D;

    --color-secondary: #2196F3;
    --color-secondary-dark: #1976D2;
    --color-secondary-light: #42A5F5;
}

[data-theme="light"] .text-white { color: #000000 !important; } /* Black text in light mode */

/* Background Colors */
.bg-dark { background-color: var(--color-bg-dark) !important; }
.bg-medium { background-color: var(--color-bg-medium) !important; }
.bg-light { background-color: var(--color-bg-light) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }

/* Glow Effects */
.glow-primary { box-shadow: var(--shadow-glow-primary) !important; }
.glow-secondary { box-shadow: var(--shadow-glow-secondary) !important; }
.glow-cyan { box-shadow: var(--shadow-glow-cyan) !important; }
.glow-purple { box-shadow: var(--shadow-glow-purple) !important; }

/* Transitions */
.transition-fast { transition: var(--transition-fast) !important; }
.transition-base { transition: var(--transition-base) !important; }
.transition-all { transition: var(--transition-all) !important; }


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

@media print {
    :root {
        --color-bg-dark: #FFFFFF;
        --color-bg-medium: #F5F5F5;
        --color-text-primary: #000000;
    }
}


/* ============================================
   END OF DESIGN SYSTEM
   Version: 2.0.0
   Last Updated: 2025-11-20
   ============================================ */