/* pw/tokens.css — PulseWatch "Ops Console" design tokens.
 *
 * Dark is the default (:root). Light overrides live under [data-theme="light"].
 * layouts/root.html sets data-theme before first paint from localStorage("pulsewatch-theme").
 * Every colour used anywhere in pw/*.css must come from a token defined here.
 */

:root {
    /* ---- theme-independent ---- */
    --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 12px;
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-md: 13px;
    --fs-lg: 15px;
    --fs-xl: 18px;
    --fs-2xl: 22px;
    --side-w: 220px;
    --top-h: 52px;

    /* ---- dark theme (default) ---- */
    color-scheme: dark;
    --bg: #0b0e13;
    --panel: #11161e;
    --panel-2: #171d27;
    --sidebar: #080a0e;
    --line: #222a36;
    --grid: #1b222d;
    --tx: #d5dbe5;
    --tx-2: #8894a7;
    --tx-3: #566175;
    --acc: #3ee6a8;
    --acc-hover: #2fd197;
    --acc-soft: rgba(62, 230, 168, 0.12);
    --acc-ink: #04140d;
    --focus: rgba(62, 230, 168, 0.45);
    --ok: #3ee6a8;
    --ok-soft: rgba(62, 230, 168, 0.12);
    --info: #5aa8ff;
    --info-soft: rgba(90, 168, 255, 0.14);
    --warn: #f5b642;
    --warn-soft: rgba(245, 182, 66, 0.14);
    --hot: #ff8a4c;
    --hot-soft: rgba(255, 138, 76, 0.14);
    --crit: #ff5d6c;
    --crit-soft: rgba(255, 93, 108, 0.14);
    --s1: #3ee6a8;
    --s2: #5aa8ff;
    --s3: #c792ea;
    --s4: #f5b642;
    --s5: #ff8a4c;
    --s6: #4dd0e1;
    --smoke: 136, 148, 167;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.5);
    --scrim: rgba(3, 5, 8, 0.6);
}

[data-theme="light"] {
    color-scheme: light;
    --bg: #f4f6f9;
    --panel: #ffffff;
    --panel-2: #f7f9fb;
    --sidebar: #eef1f5;
    --line: #dde3ea;
    --grid: #edf1f5;
    --tx: #121821;
    --tx-2: #566175;
    --tx-3: #8894a7;
    --acc: #0d9f6e;
    --acc-hover: #0b8a5f;
    --acc-soft: rgba(13, 159, 110, 0.1);
    --acc-ink: #ffffff;
    --focus: rgba(13, 159, 110, 0.35);
    --ok: #0d9f6e;
    --ok-soft: rgba(13, 159, 110, 0.1);
    --info: #2f7fe0;
    --info-soft: rgba(47, 127, 224, 0.1);
    --warn: #c98a0a;
    --warn-soft: rgba(201, 138, 10, 0.12);
    --hot: #e0661f;
    --hot-soft: rgba(224, 102, 31, 0.1);
    --crit: #e03a4c;
    --crit-soft: rgba(224, 58, 76, 0.1);
    --s1: #0d9f6e;
    --s2: #2f7fe0;
    --s3: #8e56c9;
    --s4: #c98a0a;
    --s5: #e0661f;
    --s6: #0e9fb3;
    --smoke: 70, 84, 104;
    --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-2: 0 12px 32px rgba(16, 24, 40, 0.14);
    --scrim: rgba(16, 24, 40, 0.35);
}