:root {
  color-scheme: light;
  --color-background: #e7ebef;
  --color-background-deep: #d7dde3;
  --color-surface: rgba(255, 255, 255, 0.9);
  --color-surface-strong: #ffffff;
  --color-surface-soft: rgba(255, 255, 255, 0.62);
  --color-surface-raised:
    color-mix(in srgb, var(--color-surface) 96%, var(--color-accent) 4%);
  --color-surface-muted:
    color-mix(in srgb, var(--color-surface-strong) 88%, var(--color-muted) 12%);
  --color-surface-recessed:
    color-mix(
      in srgb,
      var(--color-surface-strong) 86%,
      var(--color-background) 14%
    );
  --color-border: rgba(43, 59, 74, 0.2);
  --color-border-strong: rgba(43, 59, 74, 0.34);
  --color-text: #172635;
  --color-muted: #607183;
  --color-accent: #14789b;
  --color-accent-strong: #075d7b;
  --color-accent-contrast: #ffffff;
  --color-control-active: var(--color-accent);
  --color-control-border: var(--color-border-strong);
  --color-success: #20734d;
  --color-warning: #94600c;
  --color-danger: #b4232d;
  --color-wifi: #19845d;
  --color-bluetooth: #2774a5;
  --color-asset: #c2410c;
  --color-asset-outline: #0d1726;
  --color-zone-light-purple: #7c3aed;
  --color-background-glow-primary:
    color-mix(in srgb, var(--color-accent) 10%, transparent);
  --color-background-glow-secondary:
    color-mix(in srgb, var(--color-warning) 8%, transparent);
  --color-grid-line:
    color-mix(in srgb, var(--color-border) 28%, transparent);
  --color-track-background:
    color-mix(in srgb, var(--color-text) 8%, transparent);
  --color-map-background: var(--color-background-deep);
  --color-map-fill:
    color-mix(in srgb, var(--color-accent) 22%, transparent);
  --color-map-outline: var(--color-accent-strong);
  --shadow-navigation: 0 10px 28px rgba(33, 46, 58, 0.16);
  --shadow-panel: 0 18px 48px rgba(33, 46, 58, 0.16);
  --shadow-menu: 0 18px 42px rgba(33, 46, 58, 0.22);
  --backdrop: rgba(22, 33, 44, 0.54);
  --button-height: 32px;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

button {
  max-height: var(--button-height);
}

[hidden] {
  display: none !important;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-background: #09111c;
  --color-background-deep: #121c2a;
  --color-surface: rgba(18, 28, 42, 0.86);
  --color-surface-strong: #121c2a;
  --color-surface-soft: rgba(255, 255, 255, 0.03);
  --color-border: rgba(148, 163, 184, 0.22);
  --color-border-strong: rgba(148, 163, 184, 0.34);
  --color-text: #edf4fb;
  --color-muted: #a9bacb;
  --color-accent: #38bdf8;
  --color-accent-strong: #4fb3ff;
  --color-accent-contrast: #08111b;
  --color-success: #34d399;
  --color-warning: #f59e0b;
  --color-danger: #f87171;
  --color-wifi: #34d399;
  --color-bluetooth: #38bdf8;
  --color-asset: #fdba74;
  --color-asset-outline: #0d1726;
  --color-zone-light-purple: #a78bfa;
  --shadow-navigation: 0 10px 28px rgba(9, 16, 27, 0.16);
  --shadow-panel: 0 24px 70px rgba(4, 10, 20, 0.45);
  --shadow-menu: 0 18px 42px rgba(4, 10, 20, 0.5);
  --backdrop: rgba(1, 6, 12, 0.72);
}

:root[data-theme="survey"] {
  color-scheme: light;
  --color-background: #d9d3c5;
  --color-background-deep: #eef0e6;
  --color-surface: rgba(255, 248, 240, 0.86);
  --color-surface-strong: #fff8f0;
  --color-surface-soft: rgba(255, 255, 255, 0.38);
  --color-surface-raised: rgba(255, 248, 240, 0.9);
  --color-surface-muted: rgba(240, 231, 216, 0.96);
  --color-surface-recessed: rgba(230, 221, 205, 0.96);
  --color-border: rgba(91, 107, 96, 0.18);
  --color-border-strong: rgba(91, 107, 96, 0.34);
  --color-text: #213038;
  --color-muted: #66756d;
  --color-accent: #2f6f57;
  --color-accent-strong: #245943;
  --color-accent-contrast: #fff8f0;
  --color-control-active: #31443c;
  --color-success: #4c7c5f;
  --color-warning: #9a5b2e;
  --color-danger: #b4534b;
  --color-wifi: #34d399;
  --color-bluetooth: #0082fc;
  --color-asset: #7c3aed;
  --color-asset-outline: #f5fff7;
  --color-background-glow-primary: rgba(47, 111, 87, 0.12);
  --color-background-glow-secondary: rgba(154, 91, 46, 0.1);
  --color-grid-line: rgba(91, 107, 96, 0.05);
  --color-track-background: rgba(91, 107, 96, 0.12);
  --color-map-background: #d8d7cc;
  --color-map-fill: rgba(47, 111, 87, 0.14);
  --color-map-outline: #0f4c81;
  --shadow-navigation: 0 10px 26px rgba(53, 48, 38, 0.16);
  --shadow-panel: 0 20px 55px rgba(70, 63, 48, 0.18);
  --shadow-menu: 0 16px 34px rgba(53, 48, 38, 0.2);
  --backdrop: rgba(33, 48, 56, 0.58);
}