/**
 * DESIGN TOKENS - PREDATORS FAN SITE
 * Complete design system with all visual variables
 * Version 2.0.0 - Comprehensive UX/UI Redesign
 *
 * This file establishes the foundation for all visual design
 * including colors, typography, spacing, shadows, animations, and more.
 */

:root {
    /* ========================================
       BRAND COLORS - Nashville Predators
       ======================================== */

    /* Primary Brand Colors */
    --brand-navy-50: #e8edf5;
    --brand-navy-100: #c2d0e3;
    --brand-navy-200: #98b0cf;
    --brand-navy-300: #6e90bb;
    --brand-navy-400: #4f78ad;
    --brand-navy-500: #306099;
    --brand-navy-600: #215591;
    --brand-navy-700: #194a7e;
    --brand-navy-800: #0f3a6b;
    --brand-navy-900: #041E42; /* Primary Navy */

    --brand-gold-50: #fffbf0;
    --brand-gold-100: #fff5d9;
    --brand-gold-200: #ffeeb8;
    --brand-gold-300: #ffe796;
    --brand-gold-400: #ffe17c;
    --brand-gold-500: #ffdb62;
    --brand-gold-600: #ffd44e;
    --brand-gold-700: #ffcc3a;
    --brand-gold-800: #ffc526;
    --brand-gold-900: #FFB81C; /* Primary Gold */

    /* Brand Color Shortcuts */
    --color-primary: var(--brand-navy-800);
    --color-secondary: var(--brand-gold-900);
    --color-accent: var(--brand-gold-600);

    /* Modern Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: var(--neutral-100);
    --bg-dark: var(--brand-navy-900);
    --bg-card: #ffffff;
    --bg-card-hover: var(--neutral-50);

    /* ========================================
       NEUTRAL COLORS - Grays & Whites
       ======================================== */

    --neutral-white: #ffffff;
    --neutral-50: #fafbfc;
    --neutral-100: #f4f6f8;
    --neutral-200: #e8ecf0;
    --neutral-300: #d1d9e2;
    --neutral-400: #a8b8cc;
    --neutral-500: #7d8fa6;
    --neutral-600: #5d6f86;
    --neutral-700: #445566;
    --neutral-800: #2d3748;
    --neutral-900: #1a202c;
    --neutral-950: #0f1419;

    /* ========================================
       SEMANTIC COLORS - Status & Feedback
       ======================================== */

    /* Success Colors */
    --success-50: #ecfdf5;
    --success-100: #d1fae5;
    --success-500: #10b981;
    --success-600: #059669;
    --success-700: #047857;
    --success-900: #064e3b;

    /* Error Colors */
    --error-50: #fef2f2;
    --error-100: #fee2e2;
    --error-500: #ef4444;
    --error-600: #dc2626;
    --error-700: #b91c1c;
    --error-900: #7f1d1d;

    /* Warning Colors */
    --warning-50: #fffbeb;
    --warning-100: #fef3c7;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --warning-700: #b45309;
    --warning-900: #78350f;

    /* Info Colors */
    --info-50: #eff6ff;
    --info-100: #dbeafe;
    --info-500: #3b82f6;
    --info-600: #2563eb;
    --info-700: #1d4ed8;
    --info-900: #1e3a8a;

    /* ========================================
       TYPOGRAPHY - Font Scales & Weights
       ======================================== */

    /* Font Families */
    --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;

    /* Font Sizes - Fluid Typography Scale */
    --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);      /* 12-14px */
    --font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);        /* 14-16px */
    --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);        /* 16-18px */
    --font-size-md: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);       /* 18-20px */
    --font-size-lg: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);        /* 20-24px */
    --font-size-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);              /* 24-32px */
    --font-size-2xl: clamp(2rem, 1.7rem + 1.5vw, 2.75rem);          /* 32-44px */
    --font-size-3xl: clamp(2.5rem, 2rem + 2.5vw, 3.75rem);          /* 40-60px */
    --font-size-4xl: clamp(3rem, 2.5rem + 3vw, 4.5rem);             /* 48-72px */

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

    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-snug: 1.35;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 1.75;

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

    /* ========================================
       SPACING - Consistent Scale (4px base)
       ======================================== */

    --space-0: 0;
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-7: 1.75rem;   /* 28px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-14: 3.5rem;   /* 56px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */
    --space-32: 8rem;     /* 128px */

    /* ========================================
       SIZING - Width & Height Scales
       ======================================== */

    --size-xs: 20rem;     /* 320px */
    --size-sm: 24rem;     /* 384px */
    --size-md: 28rem;     /* 448px */
    --size-lg: 32rem;     /* 512px */
    --size-xl: 36rem;     /* 576px */
    --size-2xl: 42rem;    /* 672px */
    --size-3xl: 48rem;    /* 768px */
    --size-4xl: 56rem;    /* 896px */
    --size-5xl: 64rem;    /* 1024px */
    --size-6xl: 72rem;    /* 1152px */
    --size-7xl: 80rem;    /* 1280px */
    --size-full: 100%;

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

    /* ========================================
       BORDERS - Widths & Radii
       ======================================== */

    /* Border Widths */
    --border-width-0: 0;
    --border-width-1: 1px;
    --border-width-2: 2px;
    --border-width-4: 4px;
    --border-width-8: 8px;

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

    /* ========================================
       SHADOWS - Elevation System
       ======================================== */

    /* Box Shadows - Enhanced for Modern Look */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
    --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 1px 2px -1px rgba(0, 0, 0, 0.08);
    --shadow-base: 0 4px 8px -1px rgba(0, 0, 0, 0.15), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 12px 20px -5px rgba(0, 0, 0, 0.18), 0 6px 8px -4px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 20px 30px -8px rgba(0, 0, 0, 0.22), 0 10px 15px -6px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 30px 60px -12px rgba(0, 0, 0, 0.35);
    --shadow-2xl: 0 40px 80px -20px rgba(0, 0, 0, 0.45);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.08);

    /* Colored Shadows - More Vibrant */
    --shadow-gold: 0 6px 20px 0 rgba(255, 184, 28, 0.35);
    --shadow-gold-lg: 0 12px 40px 0 rgba(255, 184, 28, 0.5);
    --shadow-navy: 0 6px 20px 0 rgba(4, 30, 66, 0.35);
    --shadow-navy-lg: 0 12px 40px 0 rgba(4, 30, 66, 0.5);

    /* ========================================
       Z-INDEX LAYERS
       ======================================== */

    --z-below: -1;
    --z-base: 0;
    --z-raised: 10;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-notification: 800;
    --z-top: 999;

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

    /* Duration */
    --duration-instant: 0ms;
    --duration-fast: 150ms;
    --duration-base: 200ms;
    --duration-slow: 300ms;
    --duration-slower: 500ms;
    --duration-slowest: 700ms;

    /* 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-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Combined Transitions */
    --transition-fast: all var(--duration-fast) var(--ease-out);
    --transition-base: all var(--duration-base) var(--ease-out);
    --transition-slow: all var(--duration-slow) var(--ease-in-out);
    --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-transform: transform var(--duration-base) var(--ease-out);
    --transition-opacity: opacity var(--duration-base) var(--ease-out);

    /* ========================================
       BREAKPOINTS (for reference in media queries)
       ======================================== */

    --breakpoint-xs: 320px;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1440px;
    --breakpoint-3xl: 1600px;

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

    /* Touch Targets (Accessibility) */
    --touch-target-min: 44px;
    --touch-target-comfortable: 48px;

    /* Focus Ring */
    --focus-ring-width: 3px;
    --focus-ring-offset: 2px;
    --focus-ring-color: var(--brand-gold-900);
    --focus-ring: 0 0 0 var(--focus-ring-offset) var(--neutral-white),
                  0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);

    /* Navigation */
    --nav-height-desktop: 70px;
    --nav-height-mobile: 60px;

    /* Cards */
    --card-padding: var(--space-6);
    --card-padding-sm: var(--space-4);
    --card-radius: var(--radius-xl);
    --card-border: var(--border-width-1) solid var(--neutral-200);

    /* Inputs */
    --input-height: 44px;
    --input-height-sm: 36px;
    --input-height-lg: 52px;
    --input-padding-x: var(--space-4);
    --input-border: var(--border-width-2) solid var(--neutral-300);
    --input-border-focus: var(--border-width-2) solid var(--brand-gold-900);
    --input-radius: var(--radius-md);

    /* Buttons */
    --button-height: 44px;
    --button-height-sm: 36px;
    --button-height-lg: 52px;
    --button-padding-x: var(--space-6);
    --button-padding-x-sm: var(--space-4);
    --button-padding-x-lg: var(--space-8);
    --button-radius: var(--radius-md);

    /* ========================================
       GRADIENTS - Modern & Vibrant
       ======================================== */

    --gradient-navy-to-dark: linear-gradient(135deg, #0a2b5c 0%, var(--brand-navy-900) 50%, #000814 100%);
    --gradient-gold-to-light: linear-gradient(135deg, var(--brand-gold-800) 0%, var(--brand-gold-600) 50%, var(--brand-gold-400) 100%);
    --gradient-hero-overlay: linear-gradient(to top, rgba(4, 30, 66, 0.95) 0%, rgba(4, 30, 66, 0.7) 40%, rgba(4, 30, 66, 0.2) 70%, transparent 100%);
    --gradient-card-subtle: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    --gradient-shine: linear-gradient(90deg, transparent 0%, rgba(255, 184, 28, 0.15) 50%, transparent 100%);
    --gradient-gold-shine: linear-gradient(120deg, var(--brand-gold-700) 0%, var(--brand-gold-500) 50%, var(--brand-gold-700) 100%);
    --gradient-navy-gold: linear-gradient(135deg, var(--brand-navy-800) 0%, var(--brand-navy-700) 30%, var(--brand-gold-900) 100%);
    --gradient-card-hover: linear-gradient(145deg, #ffffff 0%, var(--neutral-50) 100%);

    /* ========================================
       BACKDROP FILTERS
       ======================================== */

    --backdrop-blur-sm: blur(4px);
    --backdrop-blur-base: blur(8px);
    --backdrop-blur-lg: blur(16px);
    --backdrop-blur-xl: blur(24px);
}

/* ========================================
   DARK MODE SUPPORT (Future Enhancement)
   ======================================== */

@media (prefers-color-scheme: dark) {
    /* Dark mode tokens would go here */
    /* For now, the site remains light-themed */
}

/* ========================================
   REDUCED MOTION SUPPORT
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-base: 0ms;
        --duration-slow: 0ms;
        --duration-slower: 0ms;
        --duration-slowest: 0ms;

        --transition-fast: none;
        --transition-base: none;
        --transition-slow: none;
        --transition-colors: none;
        --transition-transform: none;
        --transition-opacity: none;
    }
}

/* ========================================
   HIGH CONTRAST MODE SUPPORT
   ======================================== */

@media (prefers-contrast: high) {
    :root {
        --border-width-1: 2px;
        --border-width-2: 3px;
        --focus-ring-width: 4px;
    }
}

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

@media print {
    :root {
        --shadow-xs: none;
        --shadow-sm: none;
        --shadow-base: none;
        --shadow-md: none;
        --shadow-lg: none;
        --shadow-xl: none;
        --shadow-2xl: none;
    }
}