/* Design tokens. Two directions share one component sheet (style.css); a direction is just a token set.
   Switch with data-theme on <html>: home | learning. */

@font-face { font-family: 'Outfit'; src: url('/fonts/outfit-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

/* ---- HOME: the current Google Home / Nest app. Light tonal surfaces, tinted disc, thick ring, rounded tiles. ---- */
:root, [data-theme='home'] {
  color-scheme: light;
  --bg: #f9f9ff; --surface: #eeedf4; --surface-2: #e4e2ea; --ink: #1b1b1f; --ink-2: #5f5f67; --line: #d9d8df;
  --accent: #0b57d0; --on-accent: #ffffff; --focus: #0b57d0;
  --heat: #8a2f0e; --cool: #0b4d85; --eco: #2e6b3f; --ok: #2e6b3f; --bad: #b3261e;
  /* tonal tiles */
  --tile: #eeedf4; --tile-ink: #1b1b1f;
  --tile-heat: #ffdbcc; --tile-heat-ink: #6e2400; --tile-cool: #d6e3ff; --tile-cool-ink: #00346e;
  --tile-eco: #c9efd1; --tile-eco-ink: #0b4020; --tile-on: #d8e2ff; --tile-on-ink: #001a41;
  /* thermostat stage + dial */
  --stage-idle: transparent; --stage-heat: transparent; --stage-cool: transparent; --stage-eco: transparent; --stage-off: transparent;
  --stage-ink: #1b1b1f; --stage-ink-2: #5f5f67;
  --disc-idle: #e8e6ec; --disc-heat: #ffe3d6; --disc-cool: #dce8fc; --disc-eco: #dcf1e0; --disc-off: #e8e6ec;
  --arc-idle: #8e8c94; --arc-heat: #8a2f0e; --arc-cool: #0b4d85; --arc-eco: #2e6b3f; --arc-off: #b4b2ba;
  --dial-track: #cbc8d0; --dial-tick: transparent; --dial-tick-on: transparent;
  --disc-display: block; --tick-display: none; --ring-w: 15; --arc-opacity: 0;
  --num-idle: #4f4d55; --num-heat: #8a2f0e; --num-cool: #0b4d85; --num-eco: #2e6b3f; --num-off: #8e8c94;
  --font-body: 'Outfit', system-ui, sans-serif; --font-display: 'Outfit', system-ui, sans-serif; --font-num: 'Outfit', system-ui, sans-serif;
  --num-weight: 400; --num-spacing: -0.03em; --display-weight: 400;
  --radius: 16px; --radius-lg: 28px; --stage-radius: 0;
  --label-case: none; --label-spacing: 0;
  --pad: 16px; --gap: 12px;
}

/* ---- LEARNING: the classic Nest Learning Thermostat. Charcoal room; heat/cool colour floods the stage; tick ring. ---- */
[data-theme='learning'] {
  color-scheme: dark;
  --bg: #0f1012; --surface: #181a1d; --surface-2: #212428; --ink: #f5f6f7; --ink-2: #a2a8af; --line: #2a2e33;
  --accent: #f5f6f7; --on-accent: #0f1012; --focus: #ffffff;
  --heat: #ff7a3d; --cool: #4da3ff; --eco: #3fc88a; --ok: #3fc88a; --bad: #ff7468;
  --tile: #1c1f23; --tile-ink: #f5f6f7;
  --tile-heat: #5a2410; --tile-heat-ink: #ffd9c7; --tile-cool: #12315c; --tile-cool-ink: #d3e5ff;
  --tile-eco: #143d2c; --tile-eco-ink: #c8f0dc; --tile-on: #2c3036; --tile-on-ink: #f5f6f7;
  --stage-idle: #23262a; --stage-heat: #e5591b; --stage-cool: #1b74e4; --stage-eco: #1b8c60; --stage-off: #16171a;
  --stage-ink: #ffffff; --stage-ink-2: rgba(255,255,255,.74);
  --disc-idle: transparent; --disc-heat: transparent; --disc-cool: transparent; --disc-eco: transparent; --disc-off: transparent;
  --arc-idle: #ffffff; --arc-heat: #ffffff; --arc-cool: #ffffff; --arc-eco: #ffffff; --arc-off: rgba(255,255,255,.35);
  --dial-track: rgba(255,255,255,.14); --dial-tick: rgba(255,255,255,.28); --dial-tick-on: #ffffff;
  --disc-display: none; --tick-display: block; --ring-w: 3; --arc-opacity: 1;
  --num-idle: #ffffff; --num-heat: #ffffff; --num-cool: #ffffff; --num-eco: #ffffff; --num-off: rgba(255,255,255,.5);
  --font-body: 'Outfit', system-ui, sans-serif; --font-display: 'Outfit', system-ui, sans-serif; --font-num: 'Outfit', system-ui, sans-serif;
  --num-weight: 200; --num-spacing: -0.04em; --display-weight: 300;
  --radius: 14px; --radius-lg: 26px; --stage-radius: 30px;
  --label-case: uppercase; --label-spacing: .16em;
  --pad: 18px; --gap: 14px;
}