:root {
    /* ===== FONT SYSTEM ===== */
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-heading: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Cormorant Garamond', Georgia, serif;
    --font-mono: 'Roboto Mono', 'SF Mono', monospace; /* Fixed: was incorrectly set to serif */
    --font-ui: 'Inter', 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif; /* Sans-serif UI font for controls */

    /* ===== SPORTSBOOK DROPDOWN TYPOGRAPHY ===== */
    --sportsbook-heading-font: var(--font-heading, 'Cormorant Garamond', 'Playfair Display', Georgia, serif);
    --sportsbook-body-font: 'Exo 2', 'Inter', sans-serif;
    --sportsbook-mono-font: 'Roboto Mono', 'SF Mono', monospace;
    --sportsbook-title-size: 0.65rem;       /* ~10.4px - sportsbook names */
    --sportsbook-label-size: 0.5625rem;     /* ~9px - labels, inputs, buttons */
    --sportsbook-caption-size: 0.5rem;      /* ~8px - sync time, fetch icons */
    --sportsbook-letter-wide: 0.05em;

    /* ===== LAYOUT TOKENS ===== */
    --layout-gutter: clamp(24px, 4vw, 60px);

    /* ===== TYPOGRAPHY SCALE - 13px Baseline for Better Readability ===== */
    --text-xs: 0.6875rem;   /* 11px - small labels */
    --text-sm: 0.75rem;     /* 12px - secondary text */
    --text-base: 0.8125rem; /* 13px - BASELINE - body text */
    --text-md: 0.875rem;    /* 14px - emphasis */
    --text-lg: 0.9375rem;   /* 15px - large body */
    --text-xl: 1.0625rem;   /* 17px - headings */

    /* ===== FONT WEIGHTS ===== */
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* ===== LINE HEIGHTS ===== */
    --leading-tight: 1.25;
    --leading-normal: 1.3;
    --leading-relaxed: 1.6;

    /* ===== LETTER SPACING ===== */
    --tracking-tight: 0.02em;
    --tracking-normal: 0.04em;
    --tracking-wide: 0.08em;
    --tracking-wider: 0.2em;

    /* ===== PRIMARY COLOR SYSTEM - METALLIC FOREST & NAVY ===== */
    /* Forest Green Metallic (darker, less neon) - Theme from nav links */
    --color-primary: #008f58;          /* Dark forest green from nav links */
    --color-primary-bright: #00d689;   /* Bright emerald highlight */
    --color-primary-dark: #006b3f;     /* Darker shade */
    --color-primary-rgb: 0, 143, 88;
    --color-primary-bright-rgb: 0, 214, 137;  /* RGB version of --color-primary-bright for rgba() */

    /* Metallic Navy */
    --color-secondary: #1a237e; /* Deep Metallic Navy */
    --color-secondary-bright: #3949ab;
    --color-secondary-rgb: 26, 35, 126;

    /* Accents - Cool Metallic Cyan (Not Gold) */
    --color-accent: #00bcd4;
    --color-accent-bright: #80deea;
    --color-accent-rgb: 0, 188, 212;

    /* Semantics */
    --color-warning: #ff6f00; /* Amber */
    --color-warning-bright: #ffb300;
    --color-warning-rgb: 255, 111, 0;
    --color-loss: #c62828; /* Crimson */
    --color-loss-bright: #ef5350;
    --color-loss-rgb: 198, 40, 40;

    /* Backgrounds - Deep Navy Metallic */
    --color-bg-deep: #030b16; /* Almost black navy */
    --color-bg-base: #081121; /* Deep navy */
    --color-bg-navy: #0d1b33; /* Rich navy */
    --color-bg-navy-light: #162545;
    --color-bg-panel: rgba(8, 17, 33, 0.95);
    --color-bg-panel-light: rgba(22, 37, 69, 0.95);

    /* Text */
    --color-text-primary: #e8f0f2; /* Ice White */
    --color-text-secondary: #90a4ae; /* Metallic Blue-Grey */
    --color-text-muted: #546e7a;
    --color-text-dark: #263238;

    /* Status (canonical) */
    --status-confirmed: var(--color-primary);
    --status-active: var(--color-primary);
    --status-interactive: var(--color-secondary);
    --status-hover: var(--color-secondary);
    --status-warning: var(--color-warning);
    --status-at-risk: var(--color-warning);
    --status-pending: #888C95;
    --status-loss: #FF4F5E;
    --status-error: #FF4F5E;
    --status-win: #00FFAA;
    --status-in-progress: #FF6B35;
    --status-on-track: #00BFFF;

    /* ===== CONSOLIDATED ALIASES =====
       Use the canonical --color-* and --status-* variables above.
       These aliases exist only for backward compatibility with older CSS.
       New code should use: --color-primary, --color-bg-navy, --color-text-primary, etc.
    */

    /* Short aliases (commonly used) */
    --emerald: var(--color-primary);
    --navy: var(--color-bg-navy);
    --text: var(--color-text-primary);
    --muted: var(--color-text-muted);

    /* Glows & Shadows - Metallic Sheen */
    --glow-emerald-strong: 0 0 20px rgba(0, 143, 88, 0.5);
    --glow-emerald-medium: 0 0 12px rgba(0, 143, 88, 0.3);
    --glow-emerald-soft: 0 0 8px rgba(0, 143, 88, 0.2);
    --glow-emerald-subtle: 0 0 4px rgba(0, 143, 88, 0.1);
    
    /* Cool Cyan Glows */
    --glow-cyan-strong: 0 0 20px rgba(0, 188, 212, 0.5);
    --glow-cyan-medium: 0 0 12px rgba(0, 188, 212, 0.3);
    --glow-cyan-soft: 0 0 8px rgba(0, 188, 212, 0.2);
    --glow-cyan-subtle: 0 0 4px rgba(0, 188, 212, 0.1);
    
    --text-glow-emerald: 0 0 10px rgba(0, 214, 137, 0.4);
    --text-glow-cyan: 0 0 10px rgba(0, 229, 255, 0.4);
    --text-glow-amber: 0 0 10px rgba(255, 111, 0, 0.4);
    --text-shadow-soft: 0 2px 4px rgba(0, 0, 0, 0.6);

    /* Dashboard.css compatibility */
    --emerald-glow: var(--glow-emerald-medium);
    --cyan-glow: var(--glow-cyan-medium);
    --inner-glow: inset 0 0 10px rgba(var(--color-primary-rgb), 0.2);

    /* Borders */
    --border-emerald: 1px solid rgba(var(--color-primary-rgb), 0.3);
    --border-cyan: 1px solid rgba(var(--color-accent-rgb), 0.3);
    --border-amber: 1px solid rgba(var(--color-warning-rgb), 0.3);
    --border-subtle: 1px solid rgba(255, 255, 255, 0.08);

    /* ===== VEGAS ELEGANT ZEBRA STRIPES - REFINED ===== */
    /* Enhanced contrast for better readability */
    --zebra-odd: rgba(8, 18, 32, 0.95);           /* Deep navy - higher opacity */
    --zebra-even: rgba(12, 26, 46, 0.98);         /* Lifted navy - better contrast */
    --zebra-border: rgba(0, 214, 137, 0.12);      /* Subtle emerald separator */
    --zebra-hover: rgba(0, 143, 88, 0.18);        /* Enhanced emerald hover */

    /* Parlay-specific zebra (distinct emerald tint) */
    --zebra-parlay-odd: rgba(6, 22, 18, 0.95);    /* Deep forest-navy blend */
    --zebra-parlay-even: rgba(10, 31, 27, 0.98);  /* Lifted forest-navy blend */
    --zebra-parlay-border: rgba(0, 143, 88, 0.25);
    
    /* Row heights - Consistent Fixed Height */
    --row-height: 52px;             /* Compact height matching parlay legs */
    --row-height-parlay-leg: 52px;  /* Compact for nested sub-legs */

    /* ===== Z-INDEX SCALE - REFINEMENT: Predictable stacking system ===== */
    --z-base: 10;
    --z-table: 100;
    --z-sticky-header: 500;
    --z-dropdown: 1000;
    --z-modal: 5000;
    --z-tooltip: 10000;

    /* Gradients */
    --emerald-gradient: linear-gradient(135deg, var(--color-primary), var(--color-primary-bright));
    --navy-gradient: linear-gradient(135deg, var(--color-bg-navy), var(--color-bg-navy-light));
    --metallic-reflect: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
    --bg-metallic-navy: linear-gradient(140deg, rgba(7, 13, 24, 0.9), rgba(13, 22, 38, 0.88));

    /* ===== SPACING SCALE - 4px BASE ===== */
    /* Base units */
    --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-8: 2rem;     /* 32px */
    --space-10: 2.5rem;  /* 40px */
    --space-12: 3rem;    /* 48px */

    /* Component-specific spacing */
    --gap-cell: var(--space-1);       /* 4px - within cells */
    --gap-component: var(--space-2);  /* 8px - between elements */
    --gap-section: var(--space-4);    /* 16px - between sections */
    --gap-topline: 10px;              /* Shared spacing for brand/KPI/toggles */
    --hero-safe-top: 370px; /* Keeps hero image visible - moved down 120px */

    /* Padding presets */
    --pad-cell: 2px 4px;        /* 2px 4px - table cells (reduced for tighter spacing) */
    --pad-compact: var(--space-2) var(--space-3);     /* 8px 12px - compact buttons */
    --pad-comfortable: var(--space-3) var(--space-4); /* 12px 16px - standard buttons */
    --pad-spacious: var(--space-4) var(--space-6);    /* 16px 24px - large sections */

    /* Legacy spacing (backward compatibility) */
    --spacing-page: 3vw;
    --spacing-page-px: 48px;
    --spacing-section: var(--space-4);
    --spacing-component: var(--space-3);
    --spacing-element: var(--space-3);
    --spacing-tight: var(--space-2);
    --spacing-minimal: var(--space-1);

    /* Component-specific typography tokens */
    /* These provide semantic sizing for specific UI elements */
    --text-kpi-heading: 0.75rem; --weight-kpi-heading: 500;
    --text-kpi-value: 0.875rem; --weight-kpi-value: 500;
    --text-kpi-subtext: 0.625rem; --weight-kpi-subtext: 400;
    --text-table-header: 0.625rem; --weight-table-header: 500;
    --text-table-body: 0.75rem; --weight-table-body: 400;
    --text-numeric: 0.75rem; --weight-numeric: 400;
    --text-filter: 0.6875rem; --weight-filter: 500;
    --text-caption: 0.625rem; --weight-caption: 400;
    --text-hero-title: 2.25rem; --weight-hero-title: 700;
    --text-hero-subtitle: 0.875rem; --weight-hero-subtitle: 400;

    /* ===== FILTER DROPDOWN TYPOGRAPHY - REFINED ELEGANCE ===== */
    /* Font families for premium readability */
    --filter-font-display: var(--font-heading);
    --filter-font-body: var(--font-body);
    --filter-font-ui: var(--font-ui);
    --filter-font-mono: var(--font-mono);

    /* Type scale for filter components */
    --filter-text-xs: 0.625rem;       /* 10px - micro labels */
    --filter-text-sm: 0.75rem;        /* 12px - body text, options */
    --filter-text-base: 0.8125rem;    /* 13px - emphasized text */
    --filter-text-md: 0.875rem;       /* 14px - titles */

    /* Weights for hierarchy */
    --filter-weight-light: 300;
    --filter-weight-regular: 400;
    --filter-weight-medium: 500;
    --filter-weight-semibold: 600;
    --filter-weight-bold: 700;

    /* Line heights for readability */
    --filter-leading-tight: 1.3;
    --filter-leading-normal: 1.5;
    --filter-leading-relaxed: 1.6;

    /* Letter spacing for elegance */
    --filter-tracking-tight: 0.01em;
    --filter-tracking-normal: 0.02em;
    --filter-tracking-wide: 0.05em;
    --filter-tracking-wider: 0.12em;

    /* ===== FILTER COMPONENT STYLES ===== */
    /* Filter panel backgrounds */
    --filter-panel-bg: rgba(8, 17, 33, 0.98);
    --filter-panel-border: rgba(0, 143, 88, 0.22);
    --filter-panel-shadow: 0 16px 48px rgba(0, 0, 0, 0.65),
        0 0 1px rgba(0, 143, 88, 0.3) inset;

    /* Filter card styles */
    --filter-card-bg: rgba(0, 0, 0, 0.35);
    --filter-card-border: rgba(255, 255, 255, 0.08);
    --filter-card-hover-bg: rgba(0, 143, 88, 0.12);

    /* Filter pills */
    --filter-pill-bg: rgba(255, 255, 255, 0.06);
    --filter-pill-border: rgba(255, 255, 255, 0.1);
    --filter-pill-hover-bg: rgba(0, 143, 88, 0.15);
    --filter-pill-active-bg: rgba(0, 143, 88, 0.22);
    --filter-pill-active-border: rgba(0, 214, 137, 0.6);

    /* Filter inputs */
    --filter-input-bg: rgba(0, 0, 0, 0.45);
    --filter-input-border: rgba(255, 255, 255, 0.12);
    --filter-input-focus-border: rgba(0, 214, 137, 0.6);
    --filter-input-focus-shadow: 0 0 0 3px rgba(0, 143, 88, 0.15);

    /* Filter text colors */
    --filter-text-primary: rgba(232, 240, 242, 0.95);
    --filter-text-secondary: rgba(144, 164, 174, 0.9);
    --filter-text-muted: rgba(144, 164, 174, 0.7);
    --filter-text-accent: rgba(0, 214, 137, 1);
    --filter-text-hint: rgba(140, 160, 175, 0.7);

    /* Transitions */
    --transition-smooth: all 0.25s ease-in-out;
    --transition-fast: all 0.2s ease-in-out;
    --transition-fast-duration: 0.2s ease-in-out;
    --transition-micro: all 0.15s ease-in-out;
    --transition-slide: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-metallic: all 0.45s ease-in-out;

    /* Effects */
    --blur-glass: blur(12px);
    --blur-glow: blur(20px);
    --blur-subtle: blur(8px);

    /* Sticky offsets */
    --sticky-offset: 200px;
    --kpi-bar-h: 76px; /* Updated for premium tile height */
    --sticky-total: calc(var(--sticky-offset) + var(--kpi-bar-h));
}

@media (max-width: 1200px) {
    :root {
        --kpi-bar-h: 72px;
        --sticky-total: calc(var(--sticky-offset) + var(--kpi-bar-h));
    }
}

@media (max-width: 992px) {
    :root {
        --hero-safe-top: 320px; /* +120px */
    }
}

@media (max-width: 768px) {
    :root {
        --gap-topline: 6px;
        --hero-safe-top: 260px; /* +120px */
        --kpi-bar-h: 66px;
        --sticky-total: calc(var(--sticky-offset) + var(--kpi-bar-h));
    }
}

@media (max-width: 480px) {
    :root {
        --hero-safe-top: 230px; /* +120px */
    }
}