/**
 * Ice Arena Design System - Token System v2
 * A modern, hockey-themed design language for HockeyShare
 *
 * Design Philosophy: Clean. Cold. Dynamic.
 * Like stepping into a professional hockey arena - crisp ice, cool blue lighting, game energy.
 *
 * Version: 2.0
 * Date: November 2025
 */

:root {
    /* =========================================
       ICE PALETTE
       Cool whites and blues inspired by arena ice
       ========================================= */
    --ice-50: #f0f7ff;
    --ice-100: #e0efff;
    --ice-200: #b9dfff;
    --ice-300: #7cc4ff;
    --ice-400: #36a5ff;
    --ice-500: #0c85eb;
    --ice-600: #0068c9;
    --ice-700: #0052a3;
    --ice-800: #054786;
    --ice-900: #0a3b6f;

    /* =========================================
       RINK PALETTE
       Deep arena blues and darks for contrast
       ========================================= */
    --rink-50: #f4f6f9;
    --rink-100: #e8ecf2;
    --rink-200: #c8d2e1;
    --rink-300: #95a8c4;
    --rink-400: #5b7aa3;
    --rink-500: #3d5a82;
    --rink-600: #2f476a;
    --rink-700: #283a56;
    --rink-800: #243248;
    --rink-900: #0f172a;
    --rink-950: #080d18;

    /* =========================================
       ACCENT COLORS - Hockey Energy
       Inspired by goal lights, power plays, and game action
       ========================================= */

    /* Goal Red - Primary Action Color */
    --goal-red: #ef4444;
    --goal-red-hover: #dc2626;
    --goal-red-dark: #b91c1c;
    --goal-red-light: #fca5a5;
    --goal-red-glow: rgba(239, 68, 68, 0.4);
    --goal-red-subtle: rgba(239, 68, 68, 0.1);

    /* Power Gold - Secondary Accent */
    --power-gold: #f59e0b;
    --power-gold-hover: #d97706;
    --power-gold-dark: #b45309;
    --power-gold-light: #fcd34d;
    --power-gold-glow: rgba(245, 158, 11, 0.3);
    --power-gold-subtle: rgba(245, 158, 11, 0.1);

    /* Assist Cyan - Informational */
    --assist-cyan: #06b6d4;
    --assist-cyan-hover: #0891b2;
    --assist-cyan-dark: #0e7490;
    --assist-cyan-light: #67e8f9;
    --assist-cyan-glow: rgba(6, 182, 212, 0.3);
    --assist-cyan-subtle: rgba(6, 182, 212, 0.1);

    /* Save Green - Success States */
    --save-green: #10b981;
    --save-green-hover: #059669;
    --save-green-dark: #047857;
    --save-green-light: #6ee7b7;
    --save-green-glow: rgba(16, 185, 129, 0.3);
    --save-green-subtle: rgba(16, 185, 129, 0.1);

    /* =========================================
       SEMANTIC COLOR MAPPINGS
       Map accent colors to semantic meanings
       ========================================= */
    --color-primary: var(--goal-red);
    --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(--rink-600);
    --color-secondary-hover: var(--rink-700);
    --color-secondary-dark: var(--rink-800);

    --color-success: var(--save-green);
    --color-success-hover: var(--save-green-hover);
    --color-success-light: var(--save-green-subtle);

    --color-warning: var(--power-gold);
    --color-warning-hover: var(--power-gold-hover);
    --color-warning-light: var(--power-gold-subtle);

    --color-danger: var(--goal-red);
    --color-danger-hover: var(--goal-red-hover);
    --color-danger-light: var(--goal-red-subtle);

    --color-info: var(--assist-cyan);
    --color-info-hover: var(--assist-cyan-hover);
    --color-info-light: var(--assist-cyan-subtle);

    /* =========================================
       SURFACE COLORS
       Backgrounds and layered surfaces
       ========================================= */
    --surface-ice: #ffffff;
    --surface-frost: var(--ice-50);
    --surface-glass: rgba(255, 255, 255, 0.7);
    --surface-glass-strong: rgba(255, 255, 255, 0.9);
    --surface-boards: var(--rink-800);
    --surface-arena: var(--rink-900);
    --surface-overlay: rgba(15, 23, 42, 0.5);
    --surface-overlay-strong: rgba(15, 23, 42, 0.8);

    /* Semantic surface aliases for components */
    --surface-primary: var(--surface-ice);
    --surface-secondary: var(--surface-frost);

    /* Background aliases for backwards compatibility */
    --bg-primary: var(--surface-ice);
    --bg-secondary: var(--surface-frost);
    --bg-tertiary: var(--ice-100);
    --bg-elevated: var(--surface-ice);
    --bg-overlay: var(--surface-overlay);

    /* =========================================
       TEXT COLORS
       ========================================= */
    --text-primary: var(--rink-900);
    --text-secondary: var(--rink-700);
    --text-muted: var(--rink-500);
    --text-disabled: var(--rink-400);
    --text-inverse: #ffffff;
    --text-on-primary: #ffffff;
    --text-link: var(--ice-600);
    --text-link-hover: var(--ice-700);

    /* =========================================
       TYPOGRAPHY
       ========================================= */

    /* Font Families */
    --font-display: 'Barlow Condensed', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

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

    /* Font Sizes */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 1.875rem;    /* 30px */
    --text-4xl: 2.25rem;     /* 36px */
    --text-5xl: 3rem;        /* 48px */
    --text-6xl: 3.75rem;     /* 60px */

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

    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --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
       ========================================= */
    --space-px: 1px;
    --space-0: 0;
    --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-20: 5rem;        /* 80px */
    --space-24: 6rem;        /* 96px */
    --space-28: 7rem;        /* 112px */
    --space-32: 8rem;        /* 128px */

    /* Legacy spacing aliases */
    --space-xs: var(--space-1);
    --space-sm: var(--space-2);
    --space-md: var(--space-4);
    --space-lg: var(--space-6);
    --space-xl: var(--space-8);
    --space-2xl: var(--space-12);
    --space-3xl: var(--space-16);

    /* Component Padding */
    --padding-button: var(--space-3) var(--space-5);
    --padding-button-sm: var(--space-2) var(--space-4);
    --padding-button-lg: var(--space-4) var(--space-8);
    --padding-input: var(--space-3) var(--space-4);
    --padding-card: var(--space-6);
    --padding-section: var(--space-8);

    /* Responsive Spacing Tokens */
    --space-section-mobile: var(--space-6);
    --space-section-tablet: var(--space-8);
    --space-section-desktop: var(--space-12);

    /* Touch target minimum (WCAG 2.5.5) */
    --touch-target-min: 44px;
    --touch-target-comfortable: 48px;

    /* Responsive container padding */
    --container-padding-mobile: var(--space-4);
    --container-padding-tablet: var(--space-6);
    --container-padding-desktop: var(--space-8);

    /* =========================================
       BORDER RADIUS
       ========================================= */
    --radius-none: 0;
    --radius-sm: 0.25rem;    /* 4px */
    --radius-md: 0.375rem;   /* 6px */
    --radius-lg: 0.5rem;     /* 8px */
    --radius-xl: 0.75rem;    /* 12px */
    --radius-2xl: 1rem;      /* 16px */
    --radius-3xl: 1.5rem;    /* 24px */
    --radius-full: 9999px;

    /* Component radius aliases */
    --component-radius: var(--radius-lg);
    --component-radius-sm: var(--radius-md);
    --component-radius-lg: var(--radius-xl);
    --component-radius-xl: var(--radius-2xl);

    /* =========================================
       BORDERS
       ========================================= */
    --border-width: 1px;
    --border-width-2: 2px;
    --border-color: var(--rink-200);
    --border-color-light: var(--rink-100);
    --border-color-dark: var(--rink-300);

    /* Border shorthand */
    --border: var(--border-width) solid var(--border-color);
    --border-subtle: 1px solid rgba(148, 163, 184, 0.15);
    --border-glass: 1px solid rgba(255, 255, 255, 0.2);
    --border-frost: 1px solid rgba(14, 165, 233, 0.15);
    --border-focus: 2px solid var(--ice-500);

    /* Legacy component border aliases */
    --component-border: var(--border);
    --component-border-light: 1px solid var(--border-color-light);
    --component-border-dark: 1px solid var(--border-color-dark);

    /* =========================================
       SHADOWS
       Layered depth system
       ========================================= */
    --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px -1px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.05);
    --shadow-2xl: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(15, 23, 42, 0.05);
    --shadow-none: 0 0 #0000;

    /* Glow shadows for emphasis */
    --shadow-glow-red: 0 0 20px var(--goal-red-glow), 0 0 40px var(--goal-red-glow);
    --shadow-glow-red-sm: 0 4px 14px var(--goal-red-glow);
    --shadow-glow-red-lg: 0 8px 25px var(--goal-red-glow);

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

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

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

    /* Component shadow aliases */
    --component-shadow: var(--shadow-md);
    --component-shadow-sm: var(--shadow-sm);
    --component-shadow-md: var(--shadow-md);
    --component-shadow-lg: var(--shadow-lg);
    --component-shadow-xl: var(--shadow-xl);

    /* =========================================
       TRANSITIONS & ANIMATIONS
       ========================================= */

    /* Duration */
    --duration-fastest: 75ms;
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-normal: var(--duration-base);  /* 250ms - alias for animations */
    --duration-slow: 400ms;
    --duration-slower: 600ms;
    --duration-slowest: 1000ms;

    /* Legacy aliases */
    --transition-fast: var(--duration-fast);
    --transition-base: var(--duration-base);
    --transition-slow: var(--duration-slow);

    /* Easing 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-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

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

    /* =========================================
       INTERACTIVE STATES
       ========================================= */
    --state-hover-opacity: 0.05;
    --state-active-opacity: 0.1;
    --state-disabled-opacity: 0.5;
    --state-focus-ring: 0 0 0 3px var(--goal-red-subtle);
    --state-focus-ring-primary: 0 0 0 4px rgba(239, 68, 68, 0.15);
    --state-focus-ring-info: 0 0 0 4px rgba(6, 182, 212, 0.15);

    /* =========================================
       Z-INDEX SCALE
       ========================================= */
    --z-behind: -1;
    --z-base: 0;
    --z-raised: 10;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 9000;
    --z-modal: 9010;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;

    /* =========================================
       CONTAINER WIDTHS
       ========================================= */
    --container-xs: 20rem;   /* 320px */
    --container-sm: 24rem;   /* 384px */
    --container-md: 28rem;   /* 448px */
    --container-lg: 32rem;   /* 512px */
    --container-xl: 75rem;   /* 1200px - matches V1 page container */
    --container-2xl: 42rem;  /* 672px */
    --container-3xl: 48rem;  /* 768px */
    --container-4xl: 56rem;  /* 896px */
    --container-5xl: 64rem;  /* 1024px */
    --container-6xl: 72rem;  /* 1152px */
    --container-7xl: 80rem;  /* 1280px */
    --container-full: 100%;

    /* Legacy container aliases */
    --container-page-sm: 640px;
    --container-page-md: 768px;
    --container-page-lg: 1024px;
    --container-page-xl: 1200px;

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

    /* =========================================
       COMPONENT SPECIFIC TOKENS
       ========================================= */

    /* Avatar Sizes */
    --avatar-xs: 24px;
    --avatar-sm: 32px;
    --avatar-md: 40px;
    --avatar-lg: 48px;
    --avatar-xl: 64px;
    --avatar-2xl: 80px;

    /* Icon Sizes */
    --icon-xs: 12px;
    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-lg: 24px;
    --icon-xl: 32px;
}

/* =========================================
   GRADIENTS
   ========================================= */
:root {
    /* Brand Gradients */
    --gradient-primary: linear-gradient(135deg, var(--goal-red) 0%, var(--goal-red-hover) 100%);
    --gradient-ice: linear-gradient(135deg, var(--ice-100) 0%, var(--ice-200) 100%);
    --gradient-arena: linear-gradient(135deg, var(--rink-900) 0%, var(--rink-800) 50%, var(--rink-700) 100%);
    --gradient-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);

    /* Accent Gradients */
    --gradient-gold: linear-gradient(135deg, var(--power-gold) 0%, var(--power-gold-hover) 100%);
    --gradient-cyan: linear-gradient(135deg, var(--assist-cyan) 0%, var(--assist-cyan-hover) 100%);
    --gradient-green: linear-gradient(135deg, var(--save-green) 0%, var(--save-green-hover) 100%);

    /* Stat Card Icon Gradients */
    --gradient-stat-blue: linear-gradient(135deg, var(--ice-100) 0%, var(--ice-200) 100%);
    --gradient-stat-red: linear-gradient(135deg, #fee2e2 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%, #a7f3d0 100%);
}

/* =========================================
   DARK MODE SUPPORT (Future Enhancement)
   ========================================= */
@media (prefers-color-scheme: dark) {
    :root {
        /* Dark mode overrides can be added here */
        /* For now, dark mode is opt-in via .dark class */
    }
}

/* Dark mode class-based toggle */
.dark {
    --surface-ice: var(--rink-900);
    --surface-frost: var(--rink-800);
    --bg-primary: var(--rink-900);
    --bg-secondary: var(--rink-800);
    --text-primary: var(--ice-50);
    --text-secondary: var(--ice-200);
    --text-muted: var(--ice-400);
    --border-color: var(--rink-700);
}

/* =========================================
   PRINT STYLES
   ========================================= */
@media print {
    :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(--rink-900);
        --text-muted: var(--rink-700);
    }
}