/**
 * BTFC Stats - Design Variables
 * 
 * Central design token system with all CSS custom properties
 * Combines colors, spacing, typography, and layout systems
 * 
 * Usage: Use var(--color-primary), var(--space-4), var(--font-size-lg), etc.
 * 
 * @package BTFC_Stats
 */

:root {
    
    /* ========================================================================
       COLORS SYSTEM
       ======================================================================== */
    
    /* ==========================================================================
       SECTION 1: BRAND COLORS
       ==========================================================================
       Description: Deep archive navy and BTFC gold brand colours
       ========================================================================== */
    
    /* Primary Brand Color - Deep archive navy (not royal/purple-blue) */
    --color-primary: #071B36;
    --color-primary-dark: #04101F;
    --color-primary-light: #0B2342;
    --color-primary-lighter: #163A5C;
    
    /* Secondary Brand Color - BTFC Gold */
    --color-secondary: #F5B800;
    --color-secondary-dark: #D4A000;
    --color-secondary-light: #FFC400;
    --color-secondary-lighter: #FFE08A;
    
    /* ==========================================================================
       SECTION 2: NEUTRAL COLORS
       ==========================================================================
       Description: White, black, and complete gray scale (50-900)
       ========================================================================== */
    
    --color-white: #ffffff;
    --color-black: #000000;
    
    /* Gray Scale - Light to Dark */
    --color-gray-50: #f7f8fa;
    --color-gray-100: #f4f6f8;
    --color-gray-200: #e4e7ec;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #263141;
    --color-gray-900: #111827;
    
    /* ==========================================================================
       SECTION 3: SEMANTIC COLORS
       ==========================================================================
       Description: Success (green), warning (orange), error (red), and info (blue)
       ========================================================================== */
    
    /* Success - Green */
    --color-success: #10b981;
    --color-success-dark: #059669;
    --color-success-light: #d1fae5;
    
    /* Warning - Orange */
    --color-warning: #f59e0b;
    --color-warning-dark: #d97706;
    --color-warning-light: #fef3c7;
    
    /* Error/Danger - Red */
    --color-error: #ef4444;
    --color-error-dark: #dc2626;
    --color-error-light: #fee2e2;
    
    /* Info - Blue */
    --color-info: #3b82f6;
    --color-info-dark: #2563eb;
    --color-info-light: #dbeafe;
    
    /* ==========================================================================
       SECTION 4: BACKGROUND COLORS
       ==========================================================================
       Description: Primary, secondary, tertiary, dark backgrounds and overlays
       ========================================================================== */
    
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f4f6f8;
    --color-bg-tertiary: #eef1f5;
    --color-bg-dark: #0B2342;
    --color-bg-darker: #04101F;
    
    /* Overlay backgrounds */
    --color-overlay-light: rgba(255, 255, 255, 0.9);
    --color-overlay-dark: rgba(0, 0, 0, 0.5);

    /* Photo-on-navy wash for large heroes (homepage, season overview).
       The thin header banner uses a separate, stronger navy treatment. */
    --btfc-photo-hero-fallback: #04101F;
    --btfc-photo-hero-position: center 62%;
    --btfc-photo-hero-wash:
        linear-gradient(105deg, rgba(7, 27, 54, 0.94) 0%, rgba(7, 27, 54, 0.78) 48%, rgba(4, 16, 31, 0.88) 100%),
        repeating-linear-gradient(-18deg, rgba(245, 184, 0, 0.035) 0 12px, transparent 12px 24px);
    
    /* ==========================================================================
       SECTION 5: TEXT COLORS
       ==========================================================================
       Description: Primary, secondary, tertiary text colors and link colors
       ========================================================================== */
    
    --color-text-primary: #111827;
    --color-text-secondary: #6b7280;
    --color-text-tertiary: #9ca3af;
    --color-text-disabled: #d1d5db;
    --color-text-inverse: #ffffff;
    
    /* Link colors */
    --color-link: #071B36;
    --color-link-hover: #04101F;
    --color-link-visited: #163A5C;
    
    /* ==========================================================================
       SECTION 6: BORDER COLORS
       ==========================================================================
       Description: Light, medium, dark, and primary border color options
       ========================================================================== */
    
    --color-border-light: #e5e7eb;
    --color-border-medium: #d1d5db;
    --color-border-dark: #9ca3af;
    --color-border-primary: #071B36;
    
    /* ==========================================================================
       SECTION 7: TABLE COLORS
       ==========================================================================
       Description: Table header, row, and hover background colors
       ========================================================================== */
    
    /* Table backgrounds */
    --color-table-header: #f3f4f6;
    --color-table-row-even: #ffffff;
    --color-table-row-odd: #f9fafb;
    --color-table-hover: #f3f4f6;
    
    /* ==========================================================================
       SECTION 8: STATUS COLORS
       ==========================================================================
       Description: Win/draw/loss indicators and active/inactive state colors
       ========================================================================== */
    
    /* Win/Draw/Loss indicators */
    --color-win: #10b981;
    --color-draw: #f59e0b;
    --color-loss: #ef4444;
    
    /* Active/Inactive states */
    --color-active: #10b981;
    --color-inactive: #9ca3af;
    
    
    /* ========================================================================
       SPACING SYSTEM
       ======================================================================== */
    
    /* ==========================================================================
       SECTION 9: SPACING SCALE (REM-BASED)
       ==========================================================================
       Description: 4px-based spacing scale from 0 to 96 (0px to 384px)
       ========================================================================== */
    
    --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-20: 5rem;       /* 80px */
    --space-24: 6rem;       /* 96px */
    --space-28: 7rem;       /* 112px */
    --space-32: 8rem;       /* 128px */
    --space-36: 9rem;       /* 144px */
    --space-40: 10rem;      /* 160px */
    --space-44: 11rem;      /* 176px */
    --space-48: 12rem;      /* 192px */
    --space-52: 13rem;      /* 208px */
    --space-56: 14rem;      /* 224px */
    --space-60: 15rem;      /* 240px */
    --space-64: 16rem;      /* 256px */
    --space-72: 18rem;      /* 288px */
    --space-80: 20rem;      /* 320px */
    --space-96: 24rem;      /* 384px */
    
    /* ==========================================================================
       SECTION 10: COMPONENT-SPECIFIC SPACING
       ==========================================================================
       Description: Spacing presets for containers, cards, sections, buttons, inputs, tables, and gaps
       ========================================================================== */
    
    /* Container padding */
    --spacing-container-sm: var(--space-4);   /* 16px */
    --spacing-container-md: var(--space-6);   /* 24px */
    --spacing-container-lg: var(--space-8);   /* 32px */
    
    /* Card/Box padding */
    --spacing-card-sm: var(--space-4);        /* 16px */
    --spacing-card-md: var(--space-6);        /* 24px */
    --spacing-card-lg: var(--space-8);        /* 32px */
    
    /* Section spacing */
    --spacing-section-sm: var(--space-8);     /* 32px */
    --spacing-section-md: var(--space-12);    /* 48px */
    --spacing-section-lg: var(--space-16);    /* 64px */
    --spacing-section-xl: var(--space-24);    /* 96px */
    
    /* Element spacing (between elements) */
    --spacing-element-xs: var(--space-1);     /* 4px */
    --spacing-element-sm: var(--space-2);     /* 8px */
    --spacing-element-md: var(--space-4);     /* 16px */
    --spacing-element-lg: var(--space-6);     /* 24px */
    
    /* Button padding */
    --spacing-button-sm: var(--space-2) var(--space-4);      /* 8px 16px */
    --spacing-button-md: var(--space-3) var(--space-6);      /* 12px 24px */
    --spacing-button-lg: var(--space-4) var(--space-8);      /* 16px 32px */
    
    /* Input padding */
    --spacing-input-sm: var(--space-2) var(--space-3);       /* 8px 12px */
    --spacing-input-md: var(--space-3) var(--space-4);       /* 12px 16px */
    --spacing-input-lg: var(--space-4) var(--space-6);       /* 16px 24px */
    
    /* Table cell padding */
    --spacing-table-cell-sm: var(--space-2) var(--space-3);  /* 8px 12px */
    --spacing-table-cell-md: var(--space-3) var(--space-4);  /* 12px 16px */
    --spacing-table-cell-lg: var(--space-4) var(--space-6);  /* 16px 24px */
    
    /* Gap spacing (for flexbox/grid) */
    --gap-xs: var(--space-1);     /* 4px */
    --gap-sm: var(--space-2);     /* 8px */
    --gap-md: var(--space-4);     /* 16px */
    --gap-lg: var(--space-6);     /* 24px */
    --gap-xl: var(--space-8);     /* 32px */
    --gap-2xl: var(--space-12);   /* 48px */
    
    
    /* ========================================================================
       TYPOGRAPHY SYSTEM
       ======================================================================== */
    
    /* ==========================================================================
       SECTION 11: FONT FAMILIES
       ==========================================================================
       Description: Primary (Montserrat), heading (Bebas Neue), and monospace stacks
       ========================================================================== */
    
    /* Primary font stack - Montserrat for body text */
    --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    
    /* Heading font stack - Bebas Neue for headings */
    --font-heading: 'Bebas Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* Monospace font for code/data */
    --font-mono: 'Courier New', Courier, monospace;
    
    /* ==========================================================================
       SECTION 12: FONT SIZES
       ==========================================================================
       Description: Size scale from xs (12px) to 6xl (72px) and heading-specific sizes
       ========================================================================== */
    
    /* Extra small to large sizes */
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px - Default */
    --font-size-md: 1.125rem;     /* 18px */
    --font-size-lg: 1.25rem;      /* 20px */
    --font-size-xl: 1.5rem;       /* 24px */
    --font-size-2xl: 1.875rem;    /* 30px */
    --font-size-3xl: 2.25rem;     /* 36px */
    --font-size-4xl: 3rem;        /* 48px */
    --font-size-5xl: 3.75rem;     /* 60px */
    --font-size-6xl: 4.5rem;      /* 72px */
    
    /* Heading specific sizes */
    --font-size-h1: 2.5rem;       /* 40px */
    --font-size-h2: 2rem;         /* 32px */
    --font-size-h3: 1.5rem;       /* 24px */
    --font-size-h4: 1.25rem;      /* 20px */
    --font-size-h5: 1.125rem;     /* 18px */
    --font-size-h6: 1rem;         /* 16px */
    
    /* ==========================================================================
       SECTION 13: FONT WEIGHTS
       ==========================================================================
       Description: Weight scale from thin (100) to black (900)
       ========================================================================== */
    
    --font-weight-thin: 100;
    --font-weight-extralight: 200;
    --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;
    
    /* ==========================================================================
       SECTION 14: LINE HEIGHTS
       ==========================================================================
       Description: Line height scale from none (1) to loose (2) with component-specific values
       ========================================================================== */
    
    --line-height-none: 1;
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;
    
    /* Component specific line heights */
    --line-height-heading: 1.3;
    --line-height-body: 1.6;
    --line-height-button: 1.5;
    
    /* ==========================================================================
       SECTION 15: LETTER SPACING
       ==========================================================================
       Description: Letter spacing scale from tighter (-0.05em) to widest (0.1em)
       ========================================================================== */
    
    --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;
    
    /* ==========================================================================
       SECTION 16: TEXT TRANSFORM
       ==========================================================================
       Description: Text transformation values for uppercase, lowercase, capitalize, none
       ========================================================================== */
    
    /* Note: These are values, not CSS properties */
    --text-uppercase: uppercase;
    --text-lowercase: lowercase;
    --text-capitalize: capitalize;
    --text-none: none;
    
    
    /* ========================================================================
       LAYOUT SYSTEM
       ======================================================================== */
    
    /* ==========================================================================
       SECTION 17: CONTAINER MAX WIDTHS
       ==========================================================================
       Description: Responsive container widths from xs (320px) to 2xl (1400px)
       ========================================================================== */
    
    /* Extra small screens */
    --container-xs: 20rem;      /* 320px */
    
    /* Small screens */
    --container-sm: 40rem;      /* 640px */
    
    /* Medium screens */
    --container-md: 48rem;      /* 768px */
    
    /* Large screens */
    --container-lg: 64rem;      /* 1024px */
    
    /* Extra large screens - Standard max width */
    --container-xl: 75rem;      /* 1200px */
    
    /* 2X Large screens */
    --container-2xl: 87.5rem;   /* 1400px */
    
    /* Default container width (matches current theme) */
    --container-max-width: var(--container-xl);  /* 1200px */
    
    /* Full width */
    --container-full: 100%;
    
    /* ==========================================================================
       SECTION 18: Z-INDEX LAYERS (STACKING CONTEXT)
       ==========================================================================
       Description: Organized z-index layers from base (0) to highest (9999)
       ========================================================================== */
    
    /* Base level - normal document flow */
    --z-base: 0;
    --z-1: 1;
    --z-10: 10;
    
    /* Dropdowns and popovers */
    --z-dropdown: 100;
    
    /* Sticky elements */
    --z-sticky: 200;
    
    /* Fixed elements (headers, footers) */
    --z-fixed: 300;
    
    /* Overlays and backdrops */
    --z-overlay: 400;
    --z-modal-backdrop: 400;
    
    /* Modal dialogs */
    --z-modal: 500;
    
    /* Popovers above modals */
    --z-popover: 600;
    
    /* Tooltips */
    --z-tooltip: 700;
    
    /* Toast notifications */
    --z-toast: 800;
    
    /* Highest layer - emergency/priority elements */
    --z-highest: 9999;

    /* ==========================================================================
       SECTION 18B: ARCHIVE SURFACE TOKENS
       ==========================================================================
       Radius and elevation for cards, tables, and buttons
       ========================================================================== */

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-card: 0 1px 3px rgba(17, 24, 39, 0.08);
    --shadow-card-hover: 0 4px 12px rgba(17, 24, 39, 0.1);
    --border-card: 1px solid var(--color-gray-200);
    
    /* ==========================================================================
       SECTION 19: COMMON WIDTH VALUES
       ==========================================================================
       Description: Width scale from xs (320px) to 7xl (1280px) and fractional widths
       ========================================================================== */
    
    --width-xs: 20rem;          /* 320px */
    --width-sm: 24rem;          /* 384px */
    --width-md: 28rem;          /* 448px */
    --width-lg: 32rem;          /* 512px */
    --width-xl: 36rem;          /* 576px */
    --width-2xl: 42rem;         /* 672px */
    --width-3xl: 48rem;         /* 768px */
    --width-4xl: 56rem;         /* 896px */
    --width-5xl: 64rem;         /* 1024px */
    --width-6xl: 72rem;         /* 1152px */
    --width-7xl: 80rem;         /* 1280px */
    
    /* Fractional widths */
    --width-full: 100%;
    --width-screen: 100vw;
    --width-half: 50%;
    --width-third: 33.333333%;
    --width-quarter: 25%;
    
    /* ==========================================================================
       SECTION 20: COMMON HEIGHT VALUES
       ==========================================================================
       Description: Full, half, screen heights and common element heights
       ========================================================================== */
    
    --height-full: 100%;
    --height-screen: 100vh;
    --height-half: 50%;
    
    /* Common element heights */
    --height-header: 4rem;      /* 64px */
    --height-footer: 3rem;      /* 48px */
    --height-button: 2.5rem;    /* 40px */
    --height-input: 2.5rem;     /* 40px */
    
    /* ==========================================================================
       SECTION 21: ASPECT RATIOS
       ==========================================================================
       Description: Common aspect ratios for responsive media (square, video, wide, portrait, landscape)
       ========================================================================== */
    
    --aspect-square: 1 / 1;
    --aspect-video: 16 / 9;
    --aspect-wide: 21 / 9;
    --aspect-portrait: 3 / 4;
    --aspect-landscape: 4 / 3;
    
    /* ==========================================================================
       SECTION 22: COLUMN COUNTS
       ==========================================================================
       Description: Column count values (1-6) for multi-column layouts
       ========================================================================== */
    
    --columns-1: 1;
    --columns-2: 2;
    --columns-3: 3;
    --columns-4: 4;
    --columns-5: 5;
    --columns-6: 6;
    
    /* ==========================================================================
       SECTION 23: OPACITY LEVELS
       ==========================================================================
       Description: Opacity scale from 0 to 100 with common use cases
       ========================================================================== */
    
    --opacity-0: 0;
    --opacity-10: 0.1;
    --opacity-20: 0.2;
    --opacity-25: 0.25;
    --opacity-30: 0.3;
    --opacity-40: 0.4;
    --opacity-50: 0.5;
    --opacity-60: 0.6;
    --opacity-70: 0.7;
    --opacity-75: 0.75;
    --opacity-80: 0.8;
    --opacity-90: 0.9;
    --opacity-95: 0.95;
    --opacity-100: 1;
    
    /* Common opacity uses */
    --opacity-disabled: var(--opacity-50);
    --opacity-hover: var(--opacity-80);
    --opacity-overlay: var(--opacity-50);
}