/* Direction: night-mode smart-home console — graphite panels, a cool teal signal, an amber warning */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  color-scheme: dark;
  --canvas: #0e1316;
  --surface: #151c20;
  --surface-2: #1c262b;
  --border: #2a3940;
  --border-strong: #565a5c;
  --ink: #e9f0f2;
  --muted: #93a4ab;
  --accent: #2fc4b2;
  --accent-hover: #4ecdbe;
  --accent-ink: #0e1316;
  --accent-text: #5fe0d0;
  --accent-strong: #2fc4b2;
  --accent-soft: #153a38;
  --accent-border: #1d635c;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #102b1f;
  --success-strong: #58a474;
  --warning: #f0b44c;
  --warning-ink: #ffffff;
  --warning-soft: #403622;
  --warning-strong: #f0b44c;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #341517;
  --danger-strong: #d16969;
  --chart-1: #2fc4b2;
  --chart-2: #7cc6ff;
  --chart-3: #a27ed4;
  --chart-4: #fe9cb7;
  --chart-5: #c77c2c;
  --chart-6: #aecb68;

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --display-weight: 600;
  --display-tracking: -0.02em;
  --radius-card: 18px;
  --radius-btn: 12px;
  --radius-input: 12px;
  --font-sans: "Inter", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="light"] {
  color-scheme: light;
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f3f3;
  --border: #dddede;
  --border-strong: #b7b8b9;
  --ink: #0e1316;
  --muted: #65686a;
  --accent: #2fc4b2;
  --accent-hover: #28a797;
  --accent-ink: #0e1316;
  --accent-text: #1d786d;
  --accent-strong: #1d786d;
  --accent-soft: #e2f7f4;
  --accent-border: #a1e4dc;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #e3f0e8;
  --success-strong: #137638;
  --warning: #f0b44c;
  --warning-ink: #0e1316;
  --warning-soft: #fdf6ea;
  --warning-strong: #85652a;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f7e4e4;
  --danger-strong: #b91c1c;
  --chart-1: #0ca293;
  --chart-2: #3e9adb;
  --chart-3: #855fb2;
  --chart-4: #d97490;
  --chart-5: #a16010;
  --chart-6: #839f3b;
}

body {
  background-image: radial-gradient(60rem 30rem at 85% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
  background-repeat: no-repeat;
}
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.7); opacity: 0.45; }
}
.dot-live { animation: pulse-dot 1.8s ease-in-out infinite; }
.bar-fill { transition: width 0.8s ease; }
html.reduced-motion .dot-live { animation: none; }
html.reduced-motion .bar-fill { transition: none; }