/* ------------------------------------------------------------------
   theme.css — eye-friendly themes (loaded last so it overrides).
   Switching themes sets html[data-theme] via window.setAppTheme().
   ------------------------------------------------------------------ */

/* Low-glare light theme */
html[data-theme="light"] {
    --bg: #f4f2ec;
    --panel: #ebe7de;
    --panel2: #fdfcf9;
    --border: #cfc8b8;
    --text: #2a2825;
    --text2: #5f5a50;
    --accent: #1167a8;
    --accent2: #0e8a6c;
    --danger: #b23a48;
    --warning: #a06f0a;
    --success: #0e8a50;
    --steel: #37616f;
    --stainless: #567c82;
    --aluminum: #7f8890;
}
html[data-theme="light"] input[type="date"] { color-scheme: light; }

/* Sepia theme */
html[data-theme="sepia"] {
    --bg: #f6ecd8;
    --panel: #efe1c6;
    --panel2: #faf3e4;
    --border: #d8c5a3;
    --text: #3a3327;
    --text2: #77684f;
    --accent: #8a5a10;
    --accent2: #5f7f2f;
    --danger: #a0322f;
    --warning: #a06f0a;
    --success: #5f7f2f;
    --steel: #6c7a5a;
    --stainless: #7f8a6f;
    --aluminum: #9a9686;
}
html[data-theme="sepia"] input[type="date"] { color-scheme: light; }

/* Buttons — stop hard-coded dark hover/active backgrounds fighting the theme */
html[data-theme="light"] .btn.primary,
html[data-theme="light"] .btn.success,
html[data-theme="sepia"] .btn.primary,
html[data-theme="sepia"] .btn.success { color: #fff; }
html[data-theme="light"] .btn.active { background: #e8f1fb; color: #1167a8; border-color: #1167a8; }
html[data-theme="light"] .btn:hover { background: #e7e4dc; color: var(--text); }
html[data-theme="light"] .btn.active:hover { background: #d6e7f7; }
html[data-theme="sepia"] .btn.active { background: #f2e3c3; color: #8a5a10; border-color: #8a5a10; }
html[data-theme="sepia"] .btn:hover { background: #eadfc4; color: var(--text); }
html[data-theme="sepia"] .btn.active:hover { background: #ecd9ad; }

/* Canvas HUD / legend / slider chips follow theme */
.canvas-overlay .info-tag,
.legend-item,
.viz-grid .vc {
    background: var(--panel2);
    border-color: var(--border);
}
.canvas-overlay .info-tag { color: var(--text2); }
.canvas-overlay .info-tag span { color: var(--accent); }
.legend-item { color: var(--text2); }
.legend-dot { border: 1px solid var(--border); }
.viz-chip,
.viz-grid .chk { color: var(--text); }
.viz-chip.on,
.viz-grid .chk.on { color: var(--accent); border-color: var(--accent); }
.viz-grid .sz b { color: var(--text2); }
.viz-grid .sz input[type="range"] { accent-color: var(--accent); }