/* ThreeGigs v25 Core Variables */
:root {
    /* === BRAND COLORS === */
    --tg-primary: #8A2BE2;
    --tg-secondary: #9932CC;
    --tg-accent: #6A5ACD;
    --tg-tertiary: #DA70D6;
    --tg-streaming-red: #E50914;
    /* === BASE COLORS === */
    --tg-dark: #0a0a0a;
    --tg-surface: rgba(15, 15, 15, 0.95);
    --tg-surface-elevated: rgba(25, 25, 25, 0.98);
    --tg-nav-bg: rgba(8, 8, 8, 0.98);
    /* === GLASS EFFECTS === */
    --tg-glass: rgba(255, 255, 255, 0.05);
    --tg-glass-hover: rgba(255, 255, 255, 0.08);
    --tg-glass-strong: rgba(255, 255, 255, 0.12);
    --tg-glass-accent: rgba(138, 43, 226, 0.15);
    /* === BORDERS === */
    --tg-border: rgba(255, 255, 255, 0.08);
    --tg-border-hover: rgba(138, 43, 226, 0.3);
    --tg-border-strong: rgba(255, 255, 255, 0.15);
    --tg-border-subtle: rgba(255, 255, 255, 0.04);
    /* === TEXT COLORS === */
    --tg-text-primary: #ffffff;
    --tg-text-secondary: #b0b0b0;
    --tg-text-muted: #808080;
    --tg-text-disabled: #505050;
    --tg-text-accent: var(--tg-accent);
    /* === LAYOUT DIMENSIONS === */
    --tg-nav-width: 280px;
    --tg-nav-width-collapsed: 115px;
    --tg-header-height: 80px;
    --tg-mobile-nav-height: 80px;
    --tg-content-max-width: 1400px;
    --tg-sidebar-z-index: 1000;
    --tg-header-z-index: 1100;
    --tg-modal-z-index: 2000;
    --tg-toast-z-index: 3000;
    /* === SPACING === */
    --tg-spacing-xs: 0.25rem;
    --tg-spacing-sm: 0.5rem;
    --tg-spacing-md: 1rem;
    --tg-spacing-lg: 1.5rem;
    --tg-spacing-xl: 2rem;
    --tg-spacing-xxl: 3rem;
    /* === BORDER RADIUS === */
    --tg-radius-sm: 8px;
    --tg-radius-md: 12px;
    --tg-radius-lg: 16px;
    --tg-radius-xl: 20px;
    --tg-radius-xxl: 24px;
    --tg-radius-round: 50%;
    /* === SHADOWS === */
    --tg-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
    --tg-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
    --tg-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
    --tg-shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.4);
    --tg-shadow-purple: 0 8px 32px rgba(138, 43, 226, 0.3);
    --tg-shadow-purple-lg: 0 16px 64px rgba(138, 43, 226, 0.4);
    /* === ANIMATION CURVES === */
    --tg-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --tg-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --tg-ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --tg-ease-sharp: cubic-bezier(0.4, 0, 0.6, 1);
    /* === ANIMATION DURATIONS === */
    --tg-duration-fast: 150ms;
    --tg-duration-normal: 300ms;
    --tg-duration-slow: 500ms;
    --tg-duration-slower: 800ms;
    /* === TYPOGRAPHY === */
    --tg-font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --tg-font-family-mono: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    /* Font Sizes */
    --tg-font-xs: 0.75rem;
    --tg-font-sm: 0.875rem;
    --tg-font-md: 1rem;
    --tg-font-lg: 1.125rem;
    --tg-font-xl: 1.25rem;
    --tg-font-2xl: 1.5rem;
    --tg-font-3xl: 1.875rem;
    --tg-font-4xl: 2.25rem;
    --tg-font-5xl: 3rem;
    --tg-font-6xl: 3.75rem;
    /* Font Weights */
    --tg-font-light: 300;
    --tg-font-normal: 400;
    --tg-font-medium: 500;
    --tg-font-semibold: 600;
    --tg-font-bold: 700;
    --tg-font-extrabold: 800;
    /* Line Heights */
    --tg-leading-tight: 1.25;
    --tg-leading-normal: 1.5;
    --tg-leading-relaxed: 1.75;
    /* === BREAKPOINTS === */
    --tg-screen-sm: 640px;
    --tg-screen-md: 768px;
    --tg-screen-lg: 1024px;
    --tg-screen-xl: 1280px;
    --tg-screen-2xl: 1536px;
    /* === GRADIENTS === */
    --tg-gradient-primary: linear-gradient(135deg, var(--tg-primary) 0%, var(--tg-secondary) 100%);
    --tg-gradient-accent: linear-gradient(135deg, var(--tg-accent) 0%, var(--tg-primary) 100%);
    --tg-gradient-surface: linear-gradient(135deg, var(--tg-dark) 0%, #111111 50%, var(--tg-dark) 100%);
    --tg-gradient-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.9) 100%);
    /* === COMPONENT SPECIFIC === */
    /* Navigation */
    --tg-nav-item-hover: rgba(138, 43, 226, 0.15);
    --tg-nav-item-active: var(--tg-gradient-primary);
    /* Cards */
    --tg-card-bg: var(--tg-surface);
    --tg-card-border: var(--tg-border);
    --tg-card-hover-transform: translateY(-4px);
    --tg-card-hover-shadow: var(--tg-shadow-lg);
    /* Buttons */
    --tg-btn-primary-bg: var(--tg-gradient-primary);
    --tg-btn-secondary-bg: var(--tg-glass);
    --tg-btn-height: 44px;
    --tg-btn-height-sm: 36px;
    --tg-btn-height-lg: 52px;
    /* Forms */
    --tg-input-bg: var(--tg-glass);
    --tg-input-border: var(--tg-border);
    --tg-input-focus-border: var(--tg-border-hover);
    --tg-input-height: 48px;
    /* Status Colors */
    --tg-success: #10b981;
    --tg-warning: #f59e0b;
    --tg-error: #ef4444;
    --tg-info: #3b82f6;
    /* Live Indicators */
    --tg-live-color: var(--tg-streaming-red);
    --tg-live-pulse: 0 0 0 rgba(229, 9, 20, 0.7);
}

/* === THEME VARIATIONS === */
@media (prefers-color-scheme: light) {
    [data-theme="auto"] {
        /* Light theme overrides if needed */
        --tg-text-primary: #1a1a1a;
        --tg-text-secondary: #4a4a4a;
        --tg-text-muted: #7a7a7a;
        --tg-surface: rgba(255, 255, 255, 0.95);
        --tg-surface-elevated: rgba(255, 255, 255, 0.98);
    }
}

/* === DARK THEME (Default) === */
[data-theme="dark"],
:root {
    color-scheme: dark;
}

/* === LIGHT THEME === */
[data-theme="light"] {
    color-scheme: light;
    --tg-dark: #f8f9fa;
    --tg-surface: rgba(255, 255, 255, 0.95);
    --tg-surface-elevated: rgba(255, 255, 255, 0.98);
    --tg-nav-bg: rgba(248, 249, 250, 0.98);
    --tg-text-primary: #1a1a1a;
    --tg-text-secondary: #4a4a4a;
    --tg-text-muted: #7a7a7a;
    --tg-border: rgba(0, 0, 0, 0.08);
    --tg-border-hover: rgba(138, 43, 226, 0.3);
    --tg-glass: rgba(0, 0, 0, 0.05);
    --tg-glass-hover: rgba(0, 0, 0, 0.08);
}

/* === HIGH CONTRAST === */
[data-theme="high-contrast"] {
    --tg-text-primary: #ffffff;
    --tg-text-secondary: #ffffff;
    --tg-border: #ffffff;
    --tg-border-hover: var(--tg-primary);
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
    :root {
        --tg-duration-fast: 0ms;
        --tg-duration-normal: 0ms;
        --tg-duration-slow: 0ms;
        --tg-duration-slower: 0ms;
    }
}

/* === PRINT STYLES === */
@media print {
    :root {
        --tg-surface: #ffffff;
        --tg-text-primary: #000000;
        --tg-text-secondary: #333333;
        --tg-border: #cccccc;
    }
}