/**
 * Elite Tactician Design System - Token System v3
 * High-end athletic editorial aesthetic
 *
 * Design Philosophy: Power Navy depths, Crimson Kinetic accents,
 * surface-based layering, ambient shadows, no hard borders.
 *
 * Version: 3.0
 * Date: March 2026
 */

:root {
    /* =========================================
       ELITE TACTICIAN - PRIMARY PALETTE
       Power Navy depths
       ========================================= */
    --et-primary: #040e21;
    --et-primary-container: #1a2437;
    --et-on-primary: #ffffff;
    --et-on-primary-container: #cbd5e1;

    /* =========================================
       ELITE TACTICIAN - SECONDARY PALETTE
       Crimson Kinetic accents
       ========================================= */
    --et-secondary: #b6152e;
    --et-secondary-container: #d93343;
    --et-on-secondary: #ffffff;
    --et-on-secondary-container: #ffffff;

    /* =========================================
       ELITE TACTICIAN - TERTIARY PALETTE
       ========================================= */
    --et-tertiary: #0891b2;
    --et-tertiary-container: #cffafe;
    --et-on-tertiary: #ffffff;
    --et-on-tertiary-container: #164e63;

    /* =========================================
       ELITE TACTICIAN - SURFACE HIERARCHY
       No-Line Rule: surfaces define depth, not borders
       ========================================= */
    --et-surface: #f8f9fa;
    --et-surface-container-lowest: #ffffff;
    --et-surface-container-low: #f2f4f6;
    --et-surface-container: #ebedf0;
    --et-surface-container-high: #e2e5e9;
    --et-surface-container-highest: #d8dce1;
    --et-on-surface: #191c1e;
    --et-on-surface-variant: #6b7280;
    --et-outline-variant: rgba(197, 198, 205, 0.2);
    --et-surface-overlay: rgba(4, 14, 33, 0.5);

    /* =========================================
       ELITE TACTICIAN - SEMANTIC COLORS
       ========================================= */
    --et-error: #dc2626;
    --et-error-container: #fee2e2;
    --et-on-error: #ffffff;
    --et-on-error-container: #991b1b;

    --et-success: #059669;
    --et-success-container: #d1fae5;
    --et-on-success: #ffffff;
    --et-on-success-container: #065f46;

    --et-warning: #d97706;
    --et-warning-container: #fef3c7;
    --et-on-warning: #ffffff;
    --et-on-warning-container: #92400e;

    --et-info: #0891b2;
    --et-info-container: #cffafe;
    --et-on-info: #ffffff;
    --et-on-info-container: #164e63;

    /* =========================================
       TYPOGRAPHY - Elite Tactician
       Space Grotesk (display), Inter (body), JetBrains Mono (data)
       ========================================= */
    --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-headline: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

    /* Legacy alias */
    --font-primary: var(--font-body);

    /* =========================================
       SHADOWS - Ambient System
       Soft, diffused shadows instead of hard borders
       ========================================= */
    --shadow-ambient: 0 12px 32px -4px rgba(25, 28, 30, 0.06);
    --shadow-ambient-sm: 0 4px 12px -2px rgba(25, 28, 30, 0.04);
    --shadow-ambient-lg: 0 20px 48px -8px rgba(25, 28, 30, 0.08);
    --shadow-ambient-xl: 0 32px 64px -12px rgba(25, 28, 30, 0.12);

    /* Ghost Border - subtle edge definition without hard borders */
    --ghost-border: 1px solid rgba(197, 198, 205, 0.2);

    /* =========================================
       GRADIENTS - Elite Tactician
       ========================================= */
    --gradient-primary: linear-gradient(135deg, #b6152e 0%, #d93343 100%);
    --gradient-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    --gradient-arena: linear-gradient(135deg, var(--et-primary) 0%, var(--et-primary-container) 100%);

    /* Stat Card Icon Gradients - preserved from v2 */
    --gradient-stat-blue: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    --gradient-stat-red: linear-gradient(135deg, #fff1f2 0%, #fecaca 100%);
    --gradient-stat-gold: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    --gradient-stat-cyan: linear-gradient(135deg, #cffafe 0%, #a5f3fc 100%);
    --gradient-stat-green: linear-gradient(135deg, #d1fae5 0%, #6ee7b7 100%);

    /* =========================================
       SCROLL BEHAVIOR
       Fixed header offset
       ========================================= */
    scroll-padding-top: 4rem;

    /* =========================================
       V2 COMPATIBILITY ALIASES
       Map ALL v2 token names to v3 equivalents
       ========================================= */

    /* Ice Palette → Surface/Neutral */
    --ice-50: #f0f5ff;
    --ice-100: #e0ecff;
    --ice-200: #c5d2e0;
    --ice-300: #94a3b8;
    --ice-400: #64748b;
    --ice-500: #475569;
    --ice-600: #334155;
    --ice-700: #1e293b;
    --ice-800: #0f172a;
    --ice-900: #040e21;

    /* Rink Palette → Primary Navy */
    --rink-50: #f4f6f9;
    --rink-100: #e8ecf2;
    --rink-200: #c5c6cd;
    --rink-300: #94a3b8;
    --rink-400: #64748b;
    --rink-500: #475569;
    --rink-600: #334155;
    --rink-700: #1e293b;
    --rink-800: #1a2437;
    --rink-900: #040e21;
    --rink-950: #020812;

    /* Accent Colors → ET Crimson */
    --goal-red: #b6152e;
    --goal-red-hover: #9e1228;
    --goal-red-dark: #7f0e20;
    --goal-red-light: #f9a8b4;
    --goal-red-glow: rgba(182, 21, 46, 0.4);
    --goal-red-subtle: rgba(182, 21, 46, 0.1);

    /* Power Gold - kept similar for semantic consistency */
    --power-gold: #d97706;
    --power-gold-hover: #b45309;
    --power-gold-dark: #92400e;
    --power-gold-light: #fcd34d;
    --power-gold-glow: rgba(217, 119, 6, 0.3);
    --power-gold-subtle: rgba(217, 119, 6, 0.1);

    /* Assist Cyan → ET Tertiary */
    --assist-cyan: #0891b2;
    --assist-cyan-hover: #0e7490;
    --assist-cyan-dark: #164e63;
    --assist-cyan-light: #67e8f9;
    --assist-cyan-glow: rgba(8, 145, 178, 0.3);
    --assist-cyan-subtle: rgba(8, 145, 178, 0.1);

    /* Save Green → ET Success */
    --save-green: #059669;
    --save-green-hover: #047857;
    --save-green-dark: #065f46;
    --save-green-light: #6ee7b7;
    --save-green-glow: rgba(5, 150, 105, 0.3);
    --save-green-subtle: rgba(5, 150, 105, 0.1);

    /* Semantic Color Mappings */
    --color-primary: var(--et-secondary);
    --color-primary-hover: var(--goal-red-hover);
    --color-primary-dark: var(--goal-red-dark);
    --color-primary-light: var(--goal-red-light);
    --color-primary-glow: var(--goal-red-glow);

    --color-secondary: var(--et-on-surface-variant);
    --color-secondary-hover: #4b5563;
    --color-secondary-dark: #374151;

    --color-success: var(--et-success);
    --color-success-hover: var(--save-green-hover);
    --color-success-light: var(--et-success-container);
    --color-success-dark: var(--save-green-dark);

    --color-warning: var(--et-warning);
    --color-warning-hover: var(--power-gold-hover);
    --color-warning-light: var(--et-warning-container);
    --color-warning-dark: var(--power-gold-dark);

    --color-danger: var(--et-error);
    --color-danger-hover: #b91c1c;
    --color-danger-light: var(--et-error-container);
    --color-danger-dark: #991b1b;

    --color-info: var(--et-info);
    --color-info-hover: var(--assist-cyan-hover);
    --color-info-light: var(--et-info-container);
    --color-info-dark: var(--assist-cyan-dark);

    /* Surface Colors → ET Surface Hierarchy */
    --surface-ice: var(--et-surface-container-lowest);
    --surface-frost: var(--et-surface-container-low);
    --surface-glass: rgba(255, 255, 255, 0.7);
    --surface-glass-strong: rgba(255, 255, 255, 0.9);
    --surface-boards: var(--et-primary-container);
    --surface-arena: var(--et-primary);
    --surface-overlay: var(--et-surface-overlay);
    --surface-overlay-strong: rgba(4, 14, 33, 0.8);

    --surface-hover: var(--et-surface-container);
    --surface-divider: var(--et-surface-container-high);
    --text-dark: var(--et-on-surface);
    --status-red-bg: #fecaca;
    --status-green-bg: #d1fae5;

    --surface-primary: var(--et-surface-container-lowest);
    --surface-secondary: var(--et-surface-container-low);
    --surface-disabled: var(--et-surface-container);

    /* Background Aliases */
    --bg-primary: var(--et-surface-container-lowest);
    --bg-secondary: var(--et-surface-container-low);
    --bg-tertiary: var(--et-surface-container);
    --bg-elevated: var(--et-surface-container-lowest);
    --bg-overlay: var(--et-surface-overlay);

    /* Text Colors → ET On-Surface */
    --text-primary: var(--et-on-surface);
    --text-secondary: #374151;
    --text-muted: var(--et-on-surface-variant);
    --text-disabled: #9ca3af;
    --text-inverse: #ffffff;
    --text-on-primary: #ffffff;
    --text-link: var(--et-secondary);
    --text-link-hover: var(--goal-red-hover);

    /* Border Colors → Ghost Borders */
    --border-color: rgba(197, 198, 205, 0.25);
    --border-color-light: rgba(197, 198, 205, 0.15);
    --border-color-dark: rgba(197, 198, 205, 0.35);
    --border-hover: rgba(197, 198, 205, 0.4);

    --border: 1px solid var(--border-color);
    --border-subtle: var(--ghost-border);
    --border-glass: 1px solid rgba(255, 255, 255, 0.15);
    --border-frost: 1px solid rgba(8, 145, 178, 0.15);
    --border-focus: 2px solid var(--et-primary);

    --component-border: var(--ghost-border);
    --component-border-light: 1px solid var(--border-color-light);
    --component-border-dark: 1px solid var(--border-color-dark);

    /* Shadows → Ambient System */
    --shadow-xs: 0 1px 2px 0 rgba(25, 28, 30, 0.03);
    --shadow-sm: var(--shadow-ambient-sm);
    --shadow-md: var(--shadow-ambient);
    --shadow-lg: var(--shadow-ambient-lg);
    --shadow-xl: var(--shadow-ambient-xl);
    --shadow-2xl: 0 40px 80px -16px rgba(25, 28, 30, 0.16);
    --shadow-inner: inset 0 2px 4px 0 rgba(25, 28, 30, 0.04);
    --shadow-none: 0 0 #0000;

    /* Glow shadows → subtle crimson */
    --shadow-glow-red: 0 0 16px rgba(182, 21, 46, 0.3), 0 0 32px rgba(182, 21, 46, 0.15);
    --shadow-glow-red-sm: 0 4px 14px rgba(182, 21, 46, 0.25);
    --shadow-glow-red-lg: 0 8px 25px rgba(182, 21, 46, 0.35);

    --shadow-glow-gold: 0 0 16px var(--power-gold-glow);
    --shadow-glow-gold-sm: 0 4px 14px var(--power-gold-glow);

    --shadow-glow-cyan: 0 0 16px var(--assist-cyan-glow);
    --shadow-glow-cyan-sm: 0 4px 14px var(--assist-cyan-glow);

    --shadow-glow-green: 0 0 16px var(--save-green-glow);
    --shadow-glow-green-sm: 0 4px 14px var(--save-green-glow);

    --component-shadow: var(--shadow-ambient);
    --component-shadow-sm: var(--shadow-ambient-sm);
    --component-shadow-md: var(--shadow-ambient);
    --component-shadow-lg: var(--shadow-ambient-lg);
    --component-shadow-xl: var(--shadow-ambient-xl);

    /* Interactive States → Crimson focus */
    --state-hover-opacity: 0.05;
    --state-active-opacity: 0.1;
    --state-disabled-opacity: 0.5;
    --state-focus-ring: 0 0 0 3px rgba(182, 21, 46, 0.15);
    --state-focus-ring-primary: 0 0 0 4px rgba(182, 21, 46, 0.15);
    --state-focus-ring-info: 0 0 0 4px rgba(8, 145, 178, 0.15);

    /* =========================================
       V1 COMPATIBILITY ALIASES
       Map v1 names from inline <style> block
       ========================================= */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --component-radius: 0.5rem;
    --component-radius-sm: 0.375rem;
    --component-radius-lg: 0.75rem;
    --component-radius-xl: 1rem;
}

/* =========================================
   PRINT STYLES (moved from inline)
   ========================================= */
@media print {
    .no-print { display: none !important; }
    body { background: white !important; color: black !important; }

    :root {
        --color-primary: #000000;
        --text-primary: #000000;
        --text-secondary: #333333;
        --bg-primary: #ffffff;
        --shadow-sm: none;
        --shadow-md: none;
        --shadow-lg: none;
        --shadow-xl: none;
    }
}

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

/* =========================================
   HIGH CONTRAST MODE
   ========================================= */
@media (prefers-contrast: high) {
    :root {
        --border-color: var(--et-on-surface);
        --text-muted: #374151;
        --ghost-border: 1px solid rgba(0, 0, 0, 0.3);
    }
}

/* =========================================
   SELECTION STYLES - Crimson accent
   ========================================= */
::selection {
    background: rgba(182, 21, 46, 0.15);
    color: var(--et-on-surface);
}

::-moz-selection {
    background: rgba(182, 21, 46, 0.15);
    color: var(--et-on-surface);
}