/*
 * Nestwatch design system: tokens and components.
 * Shared by the design mockups and the Dioxus desktop and web apps.
 * SPDX-License-Identifier: AGPL-3.0-or-later
 */

/* ---------- Tokens ---------- */

:root {
  /* Night (default) */
  --ink-0: #0f1017;          /* page */
  --ink-1: #171923;          /* raised surface */
  --ink-2: #212433;          /* control surface */
  --ink-3: #2d3145;          /* hairlines, tracks */
  --text-1: #f3efe8;         /* primary text, warm white */
  --text-2: #b9b4c8;         /* secondary text */
  --text-3: #8a86a0;         /* tertiary / captions */

  --honey: #f4bd7e;          /* brand accent: the nightlight */
  --honey-ink: #2a1a07;      /* text on honey */
  --honey-soft: rgba(244, 189, 126, 0.14);
  --lavender: #b3a6ff;       /* talk-back, links, focus */
  --lavender-soft: rgba(179, 166, 255, 0.16);
  --sage: #93d4b4;           /* calm / connected */
  --sage-soft: rgba(147, 212, 180, 0.14);
  --coral: #ff8f80;          /* sound detected, alerts */
  --coral-soft: rgba(255, 143, 128, 0.16);
  --amber: #ffd36b;          /* warnings: battery, reconnecting */
  --amber-soft: rgba(255, 211, 107, 0.14);

  --focus: 0 0 0 3px var(--lavender-soft), 0 0 0 1.5px var(--lavender);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 32px rgba(0, 0, 0, 0.35);

  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Cantarell", "Ubuntu", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", "DejaVu Sans Mono", monospace;
  --text-xs: 12px;
  --text-s: 14px;
  --text-m: 16px;
  --text-l: 20px;
  --text-xl: 28px;
  --text-xxl: 44px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --slow: 600ms;
  --fast: 160ms;

  color-scheme: dark;
}

/* Day */
:root[data-theme="day"] {
  --ink-0: #faf6ef;
  --ink-1: #ffffff;
  --ink-2: #f1ece3;
  --ink-3: #e2dbcf;
  --text-1: #22202b;
  --text-2: #57536a;
  --text-3: #7d7890;
  --honey: #b8681c;
  --honey-ink: #ffffff;
  --honey-soft: rgba(184, 104, 28, 0.12);
  --lavender: #5b4bd1;
  --lavender-soft: rgba(91, 75, 209, 0.12);
  --sage: #2f8a62;
  --sage-soft: rgba(47, 138, 98, 0.12);
  --coral: #d0473a;
  --coral-soft: rgba(208, 71, 58, 0.12);
  --amber: #9a6a00;
  --amber-soft: rgba(154, 106, 0, 0.12);
  --shadow: 0 1px 2px rgba(34, 32, 43, 0.06), 0 10px 28px rgba(34, 32, 43, 0.08);
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --ink-0: #faf6ef;
    --ink-1: #ffffff;
    --ink-2: #f1ece3;
    --ink-3: #e2dbcf;
    --text-1: #22202b;
    --text-2: #57536a;
    --text-3: #7d7890;
    --honey: #b8681c;
    --honey-ink: #ffffff;
    --honey-soft: rgba(184, 104, 28, 0.12);
    --lavender: #5b4bd1;
    --lavender-soft: rgba(91, 75, 209, 0.12);
    --sage: #2f8a62;
    --sage-soft: rgba(47, 138, 98, 0.12);
    --coral: #d0473a;
    --coral-soft: rgba(208, 71, 58, 0.12);
    --amber: #9a6a00;
    --amber-soft: rgba(154, 106, 0, 0.12);
    --shadow: 0 1px 2px rgba(34, 32, 43, 0.06), 0 10px 28px rgba(34, 32, 43, 0.08);
    color-scheme: light;
  }
}

/* Dimmed station: near-black, lowest-glare variant (product.md FR-ST-4) */
.dimmed {
  --ink-0: #000000;
  --ink-1: #07070a;
  --ink-2: #0d0d12;
  --ink-3: #16161d;
  --text-1: #6d5a44;
  --text-2: #4e4234;
  --text-3: #3a3128;
  --honey: #7a5a36;
  --sage: #3f5e4f;
  --coral: #7c4a43;
  --lavender: #4f4a7a;
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--ink-0);
  color: var(--text-1);
  font-family: var(--font);
  font-size: var(--text-m);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-l); }
h3 { font-size: var(--text-m); }
p { margin: 0; }

.muted { color: var(--text-2); }
.caption { color: var(--text-3); font-size: var(--text-xs); letter-spacing: 0.02em; }
.mono { font-family: var(--font-mono); letter-spacing: 0.04em; }

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-s); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Layout ---------- */

.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-s { display: flex; flex-direction: column; gap: var(--space-2); }
.row { display: flex; align-items: center; gap: var(--space-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }

.page { max-width: 1120px; margin: 0 auto; padding: var(--space-5); }

.grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* ---------- Surfaces ---------- */

.card {
  background: var(--ink-1);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius-l);
  padding: var(--space-5);
  box-shadow: var(--shadow);
}

.card.alert { border-color: color-mix(in srgb, var(--coral) 55%, transparent); box-shadow: 0 0 0 4px var(--coral-soft), var(--shadow); }

.sheet {
  background: var(--ink-1);
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  padding: var(--space-5);
  border-top: 1px solid var(--ink-3);
}

.divider { height: 1px; background: var(--ink-3); border: 0; margin: var(--space-2) 0; }

/* ---------- Brand ---------- */

.brand { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: var(--text-l); }
.brand svg, .brand img { width: 32px; height: 32px; flex: none; }

/* ---------- Buttons ---------- */

.btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  font: inherit;
  font-weight: 600;
  font-size: var(--text-s);
  color: var(--text-1);
  background: var(--ink-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn:hover { background: var(--ink-3); }
.btn:active { transform: scale(0.98); }
.btn.primary { background: var(--honey); color: var(--honey-ink); }
.btn.primary:hover { filter: brightness(1.05); }
.btn.ghost { background: transparent; border-color: var(--ink-3); }
.btn.danger { background: var(--coral-soft); color: var(--coral); }
.btn.icon { padding: 0; width: 44px; border-radius: 50%; }
.btn.block { width: 100%; }
.btn[aria-pressed="true"] { background: var(--lavender-soft); color: var(--lavender); border-color: var(--lavender); }

.talk {
  width: 100%;
  min-height: 64px;
  border-radius: var(--radius-l);
  background: var(--lavender-soft);
  color: var(--lavender);
  border: 1px dashed color-mix(in srgb, var(--lavender) 50%, transparent);
  font-size: var(--text-m);
  user-select: none;
}
.talk.active { background: var(--lavender); color: var(--ink-0); border-style: solid; }

/* ---------- Status ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.02em;
  background: var(--ink-2);
  color: var(--text-2);
  white-space: nowrap;
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.calm { background: var(--sage-soft); color: var(--sage); }
.pill.sound { background: var(--coral-soft); color: var(--coral); }
.pill.sound::before { animation: pulse 1.2s var(--ease) infinite; }
.pill.warn { background: var(--amber-soft); color: var(--amber); }
.pill.voice { background: var(--lavender-soft); color: var(--lavender); }
.pill.cam { background: var(--honey-soft); color: var(--honey); }
.pill.plain::before { display: none; }

@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); color: var(--text-3);
}

/* ---------- Level ring (station hero) ---------- */

.ring {
  --level: 0.2;   /* 0..1 perceptual */
  --threshold: 0.45;
  position: relative;
  width: 220px; height: 220px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, var(--ink-1) 78%, transparent 79% 100%),
    conic-gradient(var(--honey) calc(var(--level) * 360deg), var(--ink-3) 0);
  display: grid; place-items: center;
  transition: background var(--slow) var(--ease);
}
.ring::after {
  content: "";
  position: absolute; inset: -6px;
  border-radius: 50%;
  background: conic-gradient(transparent calc(var(--threshold) * 360deg - 1deg), var(--text-3) 0 calc(var(--threshold) * 360deg + 1deg), transparent 0);
  -webkit-mask: radial-gradient(closest-side, transparent 94%, #000 95%);
          mask: radial-gradient(closest-side, transparent 94%, #000 95%);
}
.ring .value { text-align: center; }
.ring .value strong { display: block; font-size: var(--text-xxl); font-weight: 700; line-height: 1; }

/* ---------- Level bar + threshold (listener tiles) ---------- */

.meter {
  --level: 0.3;
  --threshold: 0.55;
  position: relative;
  height: 12px;
  border-radius: var(--radius-pill);
  background: var(--ink-3);
  overflow: visible;
}
.meter .fill {
  position: absolute; inset: 0 auto 0 0;
  width: calc(var(--level) * 100%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sage), var(--honey) 70%, var(--coral));
  transition: width 120ms linear;
}
.meter .mark {
  position: absolute; top: -5px; bottom: -5px;
  left: calc(var(--threshold) * 100%);
  width: 3px; border-radius: 2px;
  background: var(--text-1);
  box-shadow: 0 0 0 3px var(--ink-1);
}

/* Sparkline of recent levels with a draggable threshold (calibration) */
.calibrate {
  position: relative;
  height: 120px;
  border-radius: var(--radius-m);
  background: var(--ink-2);
  overflow: hidden;
}
.calibrate svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.calibrate .threshold {
  position: absolute; left: 0; right: 0;
  border-top: 2px dashed var(--honey);
}
.calibrate .threshold span {
  position: absolute; right: var(--space-2); top: -26px;
  background: var(--honey); color: var(--honey-ink);
  font-size: var(--text-xs); font-weight: 700;
  padding: 2px 8px; border-radius: var(--radius-pill);
}

/* ---------- Station tile ---------- */

.tile { display: flex; flex-direction: column; gap: var(--space-4); }
.tile .title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tile .title h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .actions { display: flex; gap: var(--space-2); }
.tile .actions .btn { flex: 1; }

.video {
  position: relative;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: #000;
  aspect-ratio: 4 / 3;
}
.video img, .video .placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
.video .badge { position: absolute; left: var(--space-3); top: var(--space-3); }

/* ---------- Forms ---------- */

.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field label { font-size: var(--text-s); font-weight: 600; color: var(--text-2); }
.input {
  font: inherit;
  color: var(--text-1);
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius-m);
  padding: 12px 14px;
  min-height: 48px;
}
.input:focus { outline: none; box-shadow: var(--focus); }
.code-input { font-family: var(--font-mono); font-size: var(--text-l); letter-spacing: 0.18em; text-transform: uppercase; text-align: center; }

.switch {
  appearance: none; width: 48px; height: 28px; border-radius: var(--radius-pill);
  background: var(--ink-3); position: relative; cursor: pointer; flex: none;
  transition: background var(--fast) var(--ease);
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--text-1); transition: transform var(--fast) var(--ease);
}
.switch:checked { background: var(--honey); }
.switch:checked::after { transform: translateX(20px); background: var(--honey-ink); }

.range { width: 100%; accent-color: var(--honey); }

.segmented { display: inline-flex; background: var(--ink-2); border-radius: var(--radius-pill); padding: 4px; gap: 4px; }
.segmented button { appearance: none; border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: var(--text-s); font-weight: 600; padding: 8px 14px; border-radius: var(--radius-pill); cursor: pointer; }
.segmented button[aria-pressed="true"] { background: var(--ink-1); color: var(--text-1); box-shadow: var(--shadow); }

/* ---------- Pairing ---------- */

.qr {
  width: 220px; height: 220px; padding: 14px;
  background: #fff; border-radius: var(--radius-m);
  display: grid; place-items: center;
}
.verify {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--honey);
}
.code-display {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

/* ---------- Lists ---------- */

.list { display: flex; flex-direction: column; }
.list .item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--ink-3); }
.list .item:last-child { border-bottom: 0; }

/* ---------- Screen-reader only ---------- */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }