/**
 * Props Odds Engine - CSS Variables & Design Tokens
 * ===================================================
 * Centralized design system variables to reduce duplication
 * and improve maintainability across all CSS files
 */

.props-odds-engine,
.props-odds,
.props-odds-scope {
    /* =========================
       Color System
       ========================= */

    /* Primary Colors */
    --props-primary: #0066cc;
    --props-primary-hover: #0052a3;
    --props-primary-active: #004185;
    --props-accent: #009eff;
    --props-accent-hover: #007acc;
    --props-accent-active: #0062a3;

    /* Text Colors */
    --props-text-primary: #0f172a;  /* Used 37 times in filters.css */
    --props-text-secondary: #475569;
    --props-text-muted: #64748b;
    --props-text-light: #94a3b8;
    --props-text-white: #ffffff;

    /* Background Colors */
    --props-bg-primary: #ffffff;
    --props-bg-secondary: #f8fafc;
    --props-bg-hover: #f1f5f9;
    --props-bg-active: #e2e8f0;
    --props-bg-dark: #1e293b;

    /* Border Colors */
    --props-border-light: #e2e8f0;  /* Used 12 times */
    --props-border-default: #cbd5e1;  /* Used 13 times */
    --props-border-dark: #94a3b8;
    --props-border-focus: rgba(0, 158, 255, 0.5);

    /* Status Colors */
    --props-success: #10b981;
    --props-success-light: #d1fae5;
    --props-warning: #f59e0b;
    --props-warning-light: #fef3c7;
    --props-error: #ef4444;
    --props-error-light: #fee2e2;
    --props-info: #3b82f6;
    --props-info-light: #dbeafe;

    /* Chip Specific Colors */
    --chip-text: var(--props-text-primary);
    --chip-text-light: var(--props-text-white);
    --chip-text-muted: var(--props-text-muted);
    --chip-bg: var(--props-bg-primary);
    --chip-bg-light: var(--props-bg-secondary);
    --chip-bg-hover: var(--props-bg-hover);
    --chip-bg-active: var(--props-accent);
    --chip-border: var(--props-border-light);
    --chip-border-hover: var(--props-border-default);
    --chip-border-active: var(--props-accent);

    /* Panel Specific Colors */
    --panel-bg: var(--props-bg-primary);
    --panel-border: var(--props-border-light);
    --panel-header-bg: var(--props-bg-secondary);
    --panel-shadow: 0 6px 14px rgba(2, 6, 23, 0.12);

    /* =========================
       Typography
       ========================= */

    /* Font Families */
    --props-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --props-font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;

    /* Font Sizes */
    --props-text-xs: 11px;
    --props-text-sm: 12px;
    --props-text-base: 14px;
    --props-text-md: 16px;
    --props-text-lg: 18px;
    --props-text-xl: 20px;
    --props-text-2xl: 24px;

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

    /* Line Heights */
    --props-leading-tight: 1.25;
    --props-leading-normal: 1.5;
    --props-leading-relaxed: 1.75;

    /* =========================
       Spacing System
       ========================= */

    --props-space-0: 0;
    --props-space-1: 4px;
    --props-space-2: 8px;
    --props-space-3: 12px;
    --props-space-4: 16px;
    --props-space-5: 20px;
    --props-space-6: 24px;
    --props-space-8: 32px;
    --props-space-10: 40px;
    --props-space-12: 48px;

    /* =========================
       Shadows
       ========================= */

    --shadow-xs: 0 1px 2px rgba(2, 6, 23, 0.04);
    --shadow-sm: 0 1px 3px rgba(2, 6, 23, 0.04);  /* Used 12 times */
    --shadow-md: 0 2px 6px rgba(2, 6, 23, 0.08);  /* Used 6 times */
    --shadow-lg: 0 6px 14px rgba(2, 6, 23, 0.12);
    --shadow-xl: 0 10px 24px rgba(2, 6, 23, 0.16);
    --shadow-2xl: 0 20px 48px rgba(2, 6, 23, 0.20);

    /* Interactive Shadows */
    --shadow-focus: 0 0 0 3px rgba(0, 158, 255, 0.16);  /* Used 7 times */
    --shadow-active: 0 4px 10px rgba(0, 158, 255, 0.26);  /* Used 4 times */
    --shadow-hover: var(--shadow-md);

    /* =========================
       Border Radius
       ========================= */

    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 999px;

    /* Component Specific */
    --chip-radius: var(--radius-full);
    --panel-radius: 14px;
    --button-radius: var(--radius-lg);
    --input-radius: var(--radius-md);

    /* =========================
       Transitions
       ========================= */

    --transition-fast: 120ms ease;
    --transition-base: 150ms ease;
    --transition-slow: 250ms ease;
    --transition-slower: 350ms ease;

    /* Complex Transitions */
    --transition-colors: background-color var(--transition-base),
                        color var(--transition-base),
                        border-color var(--transition-base);

    --transition-interactive: border-color var(--transition-base),
                             box-shadow var(--transition-base),
                             transform var(--transition-fast),
                             background var(--transition-base);

    --transition-shadow: box-shadow var(--transition-base);
    --transition-transform: transform var(--transition-fast);

    /* =========================
       Component Heights
       ========================= */

    --filter-height: 32px;
    --filter-height-lg: 38px;
    --input-height: 40px;
    --button-height: 36px;
    --chip-height: var(--filter-height);
    --chip-height-lg: calc(var(--filter-height) + 6px);

    /* =========================
       Z-Index Layers
       ========================= */

    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-popover: 500;
    --z-tooltip: 600;
    --z-notification: 700;

    /* =========================
       Breakpoints (for reference)
       ========================= */

    --breakpoint-xs: 320px;
    --breakpoint-sm: 375px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
}

/* Dark mode variables (if needed in future) */
@media (prefers-color-scheme: dark) {
    .props-odds-engine.dark-mode {
        --props-text-primary: #f1f5f9;
        --props-text-secondary: #cbd5e1;
        --props-bg-primary: #1e293b;
        --props-bg-secondary: #334155;
        --props-border-light: #475569;
        --props-border-default: #64748b;
    }
}