/* WattVision — Color tokens
   Dark-mode technical monitoring palette. */
:root {
  /* --- Base surfaces --- */
  --bg-base: #121212;        /* app background */
  --bg-surface: #1E1E1E;     /* card / panel surface */
  --bg-surface-2: #252525;   /* raised / row hover */
  --bg-surface-3: #2C2C2E;   /* borders, grid lines */

  /* --- Text --- */
  --fg-primary: #FFFFFF;      /* high-contrast text */
  --fg-secondary: #98989D;    /* labels, captions */
  --fg-muted: #6B6B70;        /* disabled / tertiary */

  /* --- Accents --- */
  --accent-data: #00E5FF;     /* cyan — primary data, KPIs, CTAs */
  --accent-data-dim: #00B8CC; /* hover / pressed cyan */
  --accent-live: #32D74B;     /* lime green — live / normal */
  --accent-area: #30D158;     /* area-gradient green */
  --alert: #FF453A;           /* red — peaks, vampire alerts */

  /* --- Alert container --- */
  --alert-bg: #3A1C1C;        /* red-tinted alert box bg */
  --alert-border: #FF453A;

  /* --- Borders --- */
  --border-subtle: #2C2C2E;
  --border-strong: #3A3A3C;

  /* --- Semantic aliases --- */
  --text-body: var(--fg-primary);
  --text-label: var(--fg-secondary);
  --surface-card: var(--bg-surface);
  --surface-app: var(--bg-base);
  --action-primary: var(--accent-data);
  --status-ok: var(--accent-live);
  --status-alert: var(--alert);

  /* --- Translucent overlays --- */
  --cyan-08: rgba(0, 229, 255, 0.08);
  --cyan-16: rgba(0, 229, 255, 0.16);
  --green-12: rgba(50, 215, 75, 0.12);
  --red-12: rgba(255, 69, 58, 0.12);
}