/* ============================================================
   Divera Monitor — Design Tokens ("Operations Console")
   Loaded BEFORE style.css. The legacy-alias block at the end
   maps the old variable names onto the new palette so the
   existing stylesheet renders against the bold new look with
   zero edits.

   BREAKPOINT STRATEGY (keep consistent everywhere):
     ≤ 768px  phone      → bottom tab-bar, single column, touch-first
     769–1024 tablet     → side-rail, condensed panels (scope rules with
                           BOTH min- and max-width so they never leak to phones)
     > 1024   desktop    → full 3-column command center
     ≤ 360px  tiny phone → font/label reductions only
   ============================================================ */

:root {
    /* ---- Palette: deep near-black layers ---- */
    --c-bg-0: #070b10;          /* app background (deepest) */
    --c-bg-1: #0c121a;          /* bars, sunken areas */
    --c-bg-2: #121a24;          /* raised background */
    --c-surface: #16202c;       /* cards */
    --c-surface-hi: #1d2a38;    /* hover / elevated */
    --c-line: #243243;          /* borders */
    --c-line-hi: #33485f;       /* strong borders / focus */

    /* ---- Text ---- */
    --c-text: #eaf2fb;          /* primary */
    --c-text-dim: #93a4b8;      /* secondary */
    --c-text-mute: #5d6e82;     /* tertiary / placeholders */

    /* ---- Accents (bold) ---- */
    --c-accent: #22d3ee;        /* electric cyan — primary */
    --c-accent-ink: #04141a;    /* text on accent fills */
    --c-accent-2: #f59e0b;      /* hot amber — secondary */

    /* ---- Semantic state ---- */
    --c-danger: #ff4d4d;
    --c-warn: #ffae3b;
    --c-ok: #2ee06a;
    --c-info: #4aa3ff;
    --c-special: #b06bff;

    /* translucent state fills/borders (replace ad-hoc rgba) */
    --c-danger-bg: rgba(255,77,77,0.14);   --c-danger-bd: rgba(255,77,77,0.42);
    --c-warn-bg:   rgba(255,174,59,0.14);  --c-warn-bd:   rgba(255,174,59,0.42);
    --c-ok-bg:     rgba(46,224,106,0.14);  --c-ok-bd:     rgba(46,224,106,0.42);
    --c-info-bg:   rgba(74,163,255,0.14);  --c-info-bd:   rgba(74,163,255,0.42);
    --c-accent-bg: rgba(34,211,238,0.13);  --c-accent-bd: rgba(34,211,238,0.40);

    /* ---- FMS status colors (fallback when API gives none) ---- */
    --fms-1: #2ee06a; --fms-2: #2ee06a; --fms-3: #ffae3b;
    --fms-4: #ff4d4d; --fms-5: #4aa3ff; --fms-6: #4aa3ff;

    /* ---- Spacing scale ---- */
    --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
    --s-5: 1.5rem;  --s-6: 2rem;   --s-7: 3rem;

    /* ---- Type scale ---- */
    --fs-xs: 0.72rem; --fs-sm: 0.82rem; --fs-md: 0.95rem;
    --fs-lg: 1.15rem; --fs-xl: 1.5rem;  --fs-2xl: 2.25rem;
    --ff: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, sans-serif;
    --ff-mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;

    /* ---- Radius ---- */
    --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 18px; --r-pill: 999px;

    /* ---- Elevation ---- */
    --e-1: 0 1px 2px rgba(0,0,0,0.5);
    --e-2: 0 4px 14px rgba(0,0,0,0.45);
    --e-3: 0 12px 40px rgba(0,0,0,0.55);
    --glow-accent: 0 0 0 1px var(--c-accent-bd), 0 0 20px -4px var(--c-accent);
    --glow-danger: 0 0 0 1px var(--c-danger-bd), 0 0 24px -4px var(--c-danger);

    /* ---- Motion ---- */
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-1: 120ms; --dur-2: 220ms; --dur-3: 380ms;

    /* ---- Z-index layers ---- */
    --z-rail: 200; --z-bar: 210; --z-ticker: 220;
    --z-banner: 230; --z-modal: 900; --z-takeover: 1000; --z-audio: 1100; --z-toast: 1300;

    /* ============================================================
       LEGACY ALIASES — existing style.css renders against the new
       palette unchanged. Do not remove until style.css is fully
       migrated to the tokens above.
       ============================================================ */
    --bg-primary: var(--c-bg-0);
    --bg-secondary: var(--c-bg-1);
    --bg-card: var(--c-surface);
    --bg-card-hover: var(--c-surface-hi);
    --border: var(--c-line);
    --text-primary: var(--c-text);
    --text-secondary: var(--c-text-dim);
    --alarm-high: var(--c-danger);
    --alarm-normal: var(--c-warn);
    --alarm-closed: var(--c-ok);
    --accent: var(--c-accent);
    --badge-bg: var(--c-surface-hi);
    /* Heatmap tiers re-tuned to the new palette */
    --hm-empty: #0e1620;
    --hm-t1: #25140f;
    --hm-t2: #5a221a;
    --hm-t3: #9a2f24;
    --hm-t4: #d6402f;
    --hm-t5: #ff4d4d;
}