: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-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-success: #20734d;
  --color-warning: #94600c;
  --color-danger: #b4232d;
  --color-wifi: #19845d;
  --color-bluetooth: #2774a5;
  --color-asset: #c2410c;
  --color-asset-outline: #0d1726;
  --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;
  --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-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-success: #4c7c5f;
  --color-warning: #9a5b2e;
  --color-danger: #b4534b;
  --color-wifi: #34d399;
  --color-bluetooth: #0082fc;
  --color-asset: #b45309;
  --color-asset-outline: #0d1726;
  --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);
}