/* ========================================
   Variables & Themes
   ======================================== */

:root {
    --bg-primary: #0a0a0a;
    --bg-secondary: #141414;
    --bg-tertiary: #1f1f1f;
    --text-primary: #ffffff;
    --text-secondary: #a0a0a0;
    --text-muted: #666666;
    --border-color: #2a2a2a;
    --border-tooltip: #3d3d3d;
    /* Fix #5: visible tooltip/panel borders */
    --accent: #ffffff;
    --accent-muted: #404040;
    --bar-default: #4a90d9;
    --bar-compare: #f5c842;
    --bar-swap: #e74c3c;
    --bar-sorted: #2ecc71;
    --bar-pivot: #9b59b6;
    --shadow: rgba(0, 0, 0, 0.5);
    --transition: 0.3s ease;
    --slider-track: #404040;
    --slider-thumb: #ffffff;
}

/* Fix #1: prevent flash of black background when theme toggles */
html {
    background: var(--bg-primary);
    transition: background-color 0.3s ease;
}

[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-tertiary: #ebebeb;
    --text-primary: #0a0a0a;
    --text-secondary: #555555;
    --text-muted: #888888;
    --border-color: #e0e0e0;
    --border-tooltip: #c0c0c0;
    --accent: #0a0a0a;
    --accent-muted: #cccccc;
    --bar-default: #3498db;
    --bar-compare: #f39c12;
    --bar-swap: #e74c3c;
    --bar-sorted: #27ae60;
    --bar-pivot: #8e44ad;
    --shadow: rgba(0, 0, 0, 0.1);
    --slider-track: #cccccc;
    --slider-thumb: #333333;
}

/* Colorblind-friendly themes */
/* Deuteranopia (red-green, most common) */
[data-colorblind="deuteranopia"] {
    --bar-default: #0077BB;
    --bar-compare: #EE7733;
    --bar-swap: #CC3311;
    --bar-sorted: #009988;
    --bar-pivot: #EE3377;
}

/* Protanopia (red-green) */
[data-colorblind="protanopia"] {
    --bar-default: #4477AA;
    --bar-compare: #CCBB44;
    --bar-swap: #EE6677;
    --bar-sorted: #228833;
    --bar-pivot: #BBBBBB;
}

/* Tritanopia (blue-yellow) */
[data-colorblind="tritanopia"] {
    --bar-default: #332288;
    --bar-compare: #AA4499;
    --bar-swap: #CC6677;
    --bar-sorted: #44AA99;
    --bar-pivot: #DDCC77;
}