/* The design system.
 *
 * Two laws, both about not lying to someone glancing at a screen at 3am:
 *
 *  1. Red is reserved. --alarm-fire appears nowhere except an active alarm.
 *     Offline is slate with a hatch; errors are amber; destructive buttons use
 *     a duller --danger that is distinguishable side by side. If red can mean
 *     five things it means nothing.
 *
 *  2. Warm means light is emitting. Amber is the on-channel and is used for
 *     nothing else; cool colours are system state. That is what makes a room
 *     readable from across it.
 *
 * Hex rather than oklch, and no @property, because the kiosk is a Fire tablet
 * whose WebView version is unknown. Modern CSS fails *visibly* there, not
 * gracefully, and the polish is not worth the risk until it is checked.
 */

:root {
  /* surfaces (dark is the reference theme) */
  --bg-0: #0B0E13;
  --bg-1: #121721;
  --bg-2: #1A2130;
  --bg-3: #242D3E;
  --line: #2A3444;
  --line-soft: #202836;

  --text-0: #E8EDF5;
  --text-1: #9FB0C7;
  --text-2: #64758B;

  /* device state */
  --on: #FFC24B;
  --on-soft: rgba(255, 194, 75, 0.14);
  --on-glow: #FFD98A;
  --off: #64758B;
  --unavail: #5A6B80;
  --pending: #9FB0C7;
  --stale: #7E8CA0;

  /* activity */
  --motion: #38BDF8;
  --open: #F0A030;

  /* alarm — the unmistakable set */
  --armed-off: #3FB950;
  --armed-home: #2DD4BF;
  --armed-away: #5B7CFA;
  --alarm-delay: #F59E0B;
  --alarm-fire: #FF3B30;

  /* ui */
  --accent: #5B7CFA;
  --success: #3FB950;
  --warn: #E0A03A;
  --danger: #E5484D;

  /* Chrome typography. One size for the navigation bar on every surface: the
     bar is shared, so it must not pick up the body size of whichever page it
     is on. */
  --nav-font: 13px;
  --hit-min: 32px;

  --radius: 6px;
  --radius-lg: 12px;
  --space: 4px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--text-0);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* Every changing number is tabular, or a dimmer ticking 8 -> 18 -> 65 makes the
 * whole tile jitter. One line; the difference between looking built and looking
 * cheap. */
.num, .mono, td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

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

/* Every surface follows the system setting.
 *
 * This was once scoped to `body[data-surface="dashboard"]`, on the reasoning
 * that density and glow read badly on white so the console should stay dark
 * whatever the system said. In practice that meant the house changed
 * appearance as you moved between its own pages, which is worse than either
 * theme: one page light, the next hard dark, on the same device at the same
 * moment. Consistency wins; a per-surface exception can come back as an
 * explicit `data-theme` if the console ever really needs one.
 *
 * Every colour is defined on bare :root first and only *re-defined* here, so a
 * browser that ignores this block still gets a complete palette. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg-0: #F4F6FA;
    --bg-1: #FFFFFF;
    --bg-2: #EDF1F7;
    --bg-3: #E1E7F0;
    --line: #DCE3EC;
    --line-soft: #E8EDF3;
    --text-0: #101722;
    --text-1: #4A5A70;
    --text-2: #7F8FA4;
    --on: #E08A00;
    --on-soft: rgba(224, 138, 0, 0.13);
    --off: #9AA8B8;
    --unavail: #A9B4C2;
    --pending: #7F8FA4;
    --stale: #93A1B2;
  }
}