/* variables.css — Design tokens */

:root {
    /* Colors */
    --color-bg: #f0f2f5;
    --color-surface: #ffffff;
    --color-text: #1a1a2e;
    --color-text-secondary: #52546b;
    --color-text-muted: #6b6d84;
    --color-border: #e2e4e9;
    --color-hover: #f5f6f8;
    --color-accent: #2563eb;
    --color-accent-light: #dbeafe;

    /* Medal colors */
    --color-gold: #fbbf24;
    --color-gold-bg: #fef3c7;
    --color-silver: #9ca3af;
    --color-silver-bg: #f3f4f6;
    --color-bronze: #d97706;
    --color-bronze-bg: #fde8c8;

    /* Status */
    --color-running: #047857;
    --color-running-bg: #d1fae5;
    --color-completed: #4b5563;
    --color-completed-bg: #f3f4f6;

    /* Results */
    --color-win: #047857;
    --color-loss: #b91c1c;
    --color-draw: #4b5563;

    /* Average row */
    --color-avg-bg: #ecfdf5;
    --color-avg-border: #a7f3d0;

    /* Typography */
    --font-main: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;
    --space-2xl: 64px;

    /* Borders */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);

    /* Table */
    --header-bg: #1e293b;
    --header-text: #f8fafc;
    --header-bg-hover: #334155;

    /* Medal text */
    --color-gold-text: #78350f;
    --color-silver-text: #1f2937;
    --color-bronze-text: #78350f;

    /* Chart (canvas) colors — overridden per theme */
    --chart-grid: rgba(0,0,0,0.18);
    --chart-axis: rgba(0,0,0,0.35);
    --chart-label: rgba(0,0,0,0.65);
    --chart-hover-outline: #000000;

    /* Medal hover */
    --color-gold-bg-hover: #fde68a;
    --color-silver-bg-hover: #e5e7eb;
    --color-bronze-bg-hover: rgba(217, 119, 6, 0.14);

    /* Unplayed */
    --color-unplayed-bg: #fafafa;

    /* Navigation — tracks the natural bar height (font * line-height + 2*0.6em padding).
       48px floor matches the original at narrow viewports; grows ~10px at 1440+ widths. */
    --nav-height: clamp(48px, calc(0.93vw + 44.7px), 58px);

    /* Color scale filter (for theme adaptation of inline colors) */
    --color-scale-filter: none;

    /* League-type pill colors (default / light themes) */
    --lt-doubling-bg: #dbeafe;
    --lt-doubling-text: #1e40af;
    --lt-ubc-bg: #ede9fe;
    --lt-ubc-text: #5b21b6;
    --lt-regular-bg: #ccfbf1;
    --lt-regular-text: #115e59;
}

/* Dark-theme league-type pill overrides */
[data-theme="dark"] {
    --lt-doubling-bg: rgba(96, 165, 250, 0.22);
    --lt-doubling-text: #93c5fd;
    --lt-ubc-bg: rgba(167, 139, 250, 0.22);
    --lt-ubc-text: #c4b5fd;
    --lt-regular-bg: rgba(45, 212, 191, 0.22);
    --lt-regular-text: #5eead4;
}
[data-theme="vegas"] {
    --lt-doubling-bg: rgba(96, 165, 250, 0.22);
    --lt-doubling-text: #93c5fd;
    --lt-ubc-bg: rgba(167, 139, 250, 0.22);
    --lt-ubc-text: #c4b5fd;
    --lt-regular-bg: rgba(45, 212, 191, 0.22);
    --lt-regular-text: #5eead4;
}
[data-theme="casino"] {
    --lt-doubling-bg: rgba(96, 165, 250, 0.22);
    --lt-doubling-text: #93c5fd;
    --lt-ubc-bg: rgba(236, 72, 153, 0.22);
    --lt-ubc-text: #f9a8d4;
    --lt-regular-bg: rgba(45, 212, 191, 0.22);
    --lt-regular-text: #5eead4;
}
[data-theme="x22"] {
    --lt-doubling-bg: rgba(96, 165, 250, 0.22);
    --lt-doubling-text: #93c5fd;
    --lt-ubc-bg: rgba(236, 72, 153, 0.22);
    --lt-ubc-text: #f9a8d4;
    --lt-regular-bg: rgba(94, 234, 212, 0.22);
    --lt-regular-text: #5eead4;
}