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

   ConanIoT compressor telemetry. Industrial "control room" aesthetic:
   restrained slate surfaces, a single cyan signal accent, and a strict status
   color language (gray / green / yellow / red) used for compressor states.
   ========================================================================== */

:root {
    /* --- Status color language (shared by both themes) --- */
    --status-gray:   #6b7683;
    --status-green:  #2ecc71;
    --status-yellow: #f1c40f;
    --status-red:    #e74c3c;

    --status-gray-dim:   rgba(107, 118, 131, 0.15);
    --status-green-dim:  rgba(46, 204, 113, 0.15);
    --status-yellow-dim: rgba(241, 196, 15, 0.15);
    --status-red-dim:    rgba(231, 76, 60, 0.15);

    /* --- Type --- */
    --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", "Roboto Mono", ui-monospace, "Courier New", monospace;

    --fs-xs:   0.75rem;
    --fs-sm:   0.875rem;
    --fs-base: 1rem;
    --fs-lg:   1.25rem;
    --fs-xl:   1.75rem;
    --fs-2xl:  2.5rem;

    /* --- Spacing / 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;

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

    --transition: 160ms ease;
}

/* --- Dark theme (default) --- */
:root,
[data-theme="dark"] {
    --bg:          #0e141b;
    --bg-elevated: #151d27;
    --surface:     #1a232f;
    --surface-2:   #212d3b;
    --border:      #2a3644;
    --border-soft: #222c38;

    --text:        #e6edf3;
    --text-muted:  #8b98a6;
    --text-faint:  #5d6b7a;

    --accent:      #35c5e0;
    --accent-soft: rgba(53, 197, 224, 0.14);
    --accent-text: #0e141b;

    --shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

/* --- Light theme --- */
[data-theme="light"] {
    --bg:          #eef1f4;
    --bg-elevated: #ffffff;
    --surface:     #ffffff;
    --surface-2:   #f4f6f9;
    --border:      #d5dce3;
    --border-soft: #e4e9ee;

    --text:        #16202b;
    --text-muted:  #5a6b7b;
    --text-faint:  #8a99a8;

    --accent:      #0f8fa8;
    --accent-soft: rgba(15, 143, 168, 0.10);
    --accent-text: #ffffff;

    --shadow: 0 6px 20px rgba(20, 40, 60, 0.10);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

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

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
}

/* Numeric readouts use the mono face for a instrument-panel feel. */
.readout {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* Visible keyboard focus everywhere. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}