/* Shared theme palette for all dashboard pages.
 *
 * Single source of truth for colors. Templates reference these variables via
 * var(--name) instead of hard-coding hex values. The default (:root) is the
 * original dark theme; [data-theme="light"] overrides it. The theme is chosen
 * client-side and stored in localStorage (see the inline script in each page).
 *
 * NOTE: canvas-drawn colors (Chart.js in history.html) cannot read var(), so
 * that page resolves these via getComputedStyle() in JS.
 */

:root {
    /* surfaces & text */
    --bg: #0b0f0b;
    --surface: #111611;
    --surface-2: #0e130e;
    --border: #1f301f;
    --border-hover: #2e4d32;
    --border-strong: #2a3a2a;
    --text: #ddeedd;
    --text-muted: #4d6e50;
    --text-faint: #484f58;

    /* accent (green) */
    --accent: #4aea7a;
    --accent-bright: #6ef598;
    --accent-deep: #2a8c50;
    --accent-border: #2a5c30;
    --accent-bg: #0d200f;
    --accent-overlay: #4aea7a18;
    --accent-glow: #4aea7a88;
    --accent-glow-soft: #4aea7a66;

    /* gold (LED / pump) */
    --gold: #c8a84b;

    /* warning (amber) */
    --warn: #e8c840;
    --warn-border: #6e6020;
    --warn-bg: #1e1a07;
    --warn-glow: #e8c84088;
    --warn-overlay: #e8c84018;

    /* error (red) */
    --error: #e85555;
    --error-border: #7a2a2a;
    --error-border-soft: #5c2a2a;
    --error-bg: #200d0d;
    --error-glow: #e8555588;
    --error-glow-soft: #e8555566;
    --error-overlay: #e8555518;

    /* info (blue / startup) */
    --info: #4a80ea;
    --info-bright: #4a9fea;
    --info-border: #2a4a7a;
    --info-bg: #0d1a2e;
    --info-glow: #4a80ea88;
}

[data-theme="light"] {
    /* surfaces & text */
    --bg: #f3f6f3;
    --surface: #ffffff;
    --surface-2: #eef2ee;
    --border: #d6e2d8;
    --border-hover: #b6ceba;
    --border-strong: #c5d4c7;
    --text: #16231a;
    --text-muted: #5a7d5e;
    --text-faint: #8a949a;

    /* accent (green) — darkened for contrast on light surfaces */
    --accent: #1f9b52;
    --accent-bright: #17833f;
    --accent-deep: #2a8c50;
    --accent-border: #9fd3ad;
    --accent-bg: #e3f4e8;
    --accent-overlay: #1f9b5218;
    --accent-glow: #1f9b5240;
    --accent-glow-soft: #1f9b5226;

    /* gold (LED / pump) */
    --gold: #9a7616;

    /* warning (amber) */
    --warn: #b8860b;
    --warn-border: #d9c07a;
    --warn-bg: #fbf3dd;
    --warn-glow: #b8860b40;
    --warn-overlay: #b8860b18;

    /* error (red) */
    --error: #d23b3b;
    --error-border: #e3a1a1;
    --error-border-soft: #ecbcbc;
    --error-bg: #fbe5e5;
    --error-glow: #d23b3b40;
    --error-glow-soft: #d23b3b26;
    --error-overlay: #d23b3b18;

    /* info (blue / startup) */
    --info: #2a6fd4;
    --info-bright: #1f5fc4;
    --info-border: #a1bce8;
    --info-bg: #e5eefb;
    --info-glow: #2a6fd440;
}

/* Shared theme-toggle button (matches the nav-link look). width/margin are
 * reset so a page's generic `button {}` rule (e.g. the login form) can't
 * stretch it full-width. */
.theme-toggle {
    width: auto;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1;
    color: var(--accent);
    background: transparent;
    border: 1px solid var(--accent-border);
    border-radius: 6px;
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.theme-toggle:hover { background: var(--accent-overlay); border-color: var(--accent); }