/* ==========================================================================
   theme.css — Design tokens and theme system (dark default, light optional).

   S.E. temperature monitoring. The palette continues the language already
   used by the panel SVGs: graphite surfaces, a single teal signal accent, and
   a strict status vocabulary (green / yellow / red) reserved for readings.
   Nothing else in the interface is allowed to use the status colors, so a
   colored element always means a measurement.
   ========================================================================== */

:root {
    /* --- Status language (identical in both themes, by design) --- */
    --status-normal: #2f9e44;
    --status-warning: #e8c33a;
    --status-critical: #d6403a;
    --status-offline: #9aa0a7;

    --status-normal-dim: rgba(47, 158, 68, 0.16);
    --status-warning-dim: rgba(232, 195, 58, 0.16);
    --status-critical-dim: rgba(214, 64, 58, 0.16);

    /* --- Type --- */
    --font-body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-mono: "IBM Plex Mono", "Consolas", ui-monospace, monospace;

    --fs-xs: 0.75rem;
    --fs-sm: 0.8125rem;
    --fs-base: 0.9375rem;
    --fs-md: 1.0625rem;
    --fs-lg: 1.375rem;
    --fs-xl: 1.75rem;

    /* Tooltip text size, on its own token because it is meant to be tuned:
       change this single value and the balloon resizes as a whole, since its
       padding is in em and its distance from the cursor follows its height.
       Currently 3x --fs-xs. */
    --tooltip-fs: 2.25rem;

    /* Size of the accumulated energy row in the summary, label and value
       together. Currently 2x --fs-sm. */
    --summary-total-fs: 1.625rem;

    /* --- Spacing and geometry --- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-8: 3rem;

    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 14px;

    --header-h: 60px;
    --sidebar-w: 232px;

    --transition: 160ms ease;
}

/* --- Dark theme (default) --- */
:root,
[data-theme="dark"] {
    --bg: #0e1013;
    --surface: #15181c;
    --surface-raised: #1c2026;
    --surface-hover: #232830;

    --border: #2b3038;
    --border-strong: #3a4149;

    --text: #f1f3f5;
    --text-muted: #9aa0a7;
    --text-faint: #6b7178;

    --accent: #4fd0c9;
    --accent-hover: #6fded8;
    --accent-dim: rgba(79, 208, 201, 0.14);
    --accent-contrast: #0e1013;

    --danger: #d6403a;
    --danger-dim: rgba(214, 64, 58, 0.14);

    --shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    --scrim: rgba(0, 0, 0, 0.6);
}

/* --- Light theme --- */
[data-theme="light"] {
    --bg: #eef0f3;
    --surface: #ffffff;
    --surface-raised: #f6f7f9;
    --surface-hover: #e9ecf0;

    --border: #d5d9df;
    --border-strong: #b6bcc5;

    --text: #15181c;
    --text-muted: #5b636d;
    --text-faint: #868e98;

    --accent: #0e7c86;
    --accent-hover: #0b656d;
    --accent-dim: rgba(14, 124, 134, 0.10);
    --accent-contrast: #ffffff;

    --danger: #c0332d;
    --danger-dim: rgba(192, 51, 45, 0.10);

    --shadow: 0 4px 16px rgba(21, 24, 28, 0.12);
    --scrim: rgba(21, 24, 28, 0.35);
}

/* --- Reset --- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 600;
    line-height: 1.25;
}

a {
    color: var(--accent);
    text-decoration: none;
}

/* Visible keyboard focus everywhere, never removed without a replacement. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}