/* Shared semantic colors for the cPanel edition. Subtle lines are decorative;
   control borders and focus rings carry the stronger interaction contrast. */
html[data-theme="day"] {
  color-scheme: light;
  --bg: #f4f8f9;
  --surface: #ffffff;
  --ink: #102f38;
  --muted: #526d75;
  --line: #d2e0e3;
  --accent: #087f8c;
  --accent2: #006b73;
  --soft: #e3f3f3;
  --control-line: #789198;
  --focus-ring: #006b73;
}

html[data-theme="night"] {
  color-scheme: dark;
  --bg: #082c36;
  --surface: #123e49;
  --ink: #f3fafa;
  --muted: #a8c3c8;
  --line: #31545e;
  --accent: #12c8cc;
  --accent2: #8ae8e5;
  --control-line: #688b95;
  --focus-ring: #8ae8e5;
}

html[data-theme="day"] body {
  background: var(--bg);
  color: var(--ink);
}

html[data-theme="day"] .anesta-header {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: 0 5px 18px #102f380d;
}

html[data-theme="day"] .welcome {
  background: #e8f4f5;
  border: 1px solid #c9e3e6;
}

html[data-theme="day"] :is(.welcome-label, .welcome-dot) {
  color: var(--accent2);
}

html[data-theme="day"] :is(.tabbar, .action-dock) {
  background: #ffffff;
  border-color: var(--line);
}

html[data-theme="day"]
  :is(.field input, .field select, .field textarea, .search input, .copy-report, .report-item select, .route-option span) {
  border-color: var(--control-line);
}

html[data-theme="night"]
  :is(.field input, .field select, .field textarea, .search input, .copy-report, .report-item select, .route-option span) {
  border-color: var(--control-line);
}

html[data-theme="day"] :is(.tabs button.active, .tabbar button[aria-current="page"]) {
  background: #d8efee;
  color: var(--accent2);
  box-shadow: inset 0 0 0 2px var(--accent);
}

html[data-theme="night"] :is(.tabs button.active, .tabbar button[aria-current="page"]) {
  background: #0c3d47;
  color: var(--accent2);
  box-shadow: inset 0 0 0 2px var(--accent);
}

html[data-theme="day"] :is(button, a, .field input, .field select, .field textarea, summary):focus-visible,
html[data-theme="night"] :is(button, a, .field input, .field select, .field textarea, summary):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}