:root {
  --surface-app: var(--bg, #eef2f4);
  --surface-panel: var(--panel, #ffffff);
  --surface-panel-soft: rgba(247, 249, 249, 0.92);
  --surface-control: #ffffff;
  --surface-control-hover: #f6faf9;
  --viewer-bar-bg: rgba(255, 255, 255, 0.97);
  --text-primary: var(--ink, #172026);
  --text-muted: var(--muted, #5f6b74);
  --border-subtle: var(--line, #cfd8df);
  --border-strong: rgba(17, 122, 116, 0.45);
  --accent: var(--teal, #117a74);
  --accent-strong: var(--teal-strong, var(--teal-dark, #0a5f5a));
  --accent-contrast: #ffffff;
  --state-success: #1f7a4d;
  --state-warning: var(--amber, #b86d10);
  --state-danger: var(--rose, var(--red, #b84f5e));
  --shadow-raised: 0 16px 42px rgba(23, 32, 38, 0.16);
  --shadow-card: 0 12px 34px rgba(23, 32, 38, 0.09);
  --scene-bg: #eef2f4;
  --viewer-bg: #050708;
  --builder-canvas-bg: #dfe9e9;
  --builder-grid-line: rgba(95, 107, 116, 0.18);
  --builder-floor-fill: #f6f1e8;
  --builder-floor-line: #d3ddd8;
  --builder-wall-fill: #dce8e6;
  --builder-wall-line: #9aadb1;
  --builder-door-fill: rgba(184, 109, 16, 0.18);
  --builder-door-line: #b86d10;
  --builder-object-line: #172026;
  --avatar-stage-floor: #f8fbfa;
  --avatar-stage-backdrop: #dce7e6;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101619;
  --panel: #171f23;
  --ink: #edf4f5;
  --muted: #a5b3b8;
  --line: #344247;
  --teal: #38bdb0;
  --teal-dark: #7adbd2;
  --teal-strong: #7adbd2;
  --blue: #7aa7f2;
  --amber: #f2bd68;
  --rose: #ee7d8c;
  --red: #ee7d72;
  --green: #62c98e;
  --surface-app: #101619;
  --surface-panel: #171f23;
  --surface-panel-soft: rgba(26, 36, 40, 0.94);
  --surface-control: #202a2f;
  --surface-control-hover: #27343a;
  --viewer-bar-bg: #202a2f;
  --text-primary: #edf4f5;
  --text-muted: #a5b3b8;
  --border-subtle: #344247;
  --border-strong: rgba(56, 189, 176, 0.48);
  --accent: #38bdb0;
  --accent-strong: #7adbd2;
  --accent-contrast: #061113;
  --state-success: #62c98e;
  --state-warning: #f2bd68;
  --state-danger: #ee7d8c;
  --shadow-raised: 0 18px 52px rgba(0, 0, 0, 0.42);
  --shadow-card: 0 14px 40px rgba(0, 0, 0, 0.34);
  --scene-bg: #11181c;
  --viewer-bg: #040607;
  --builder-canvas-bg: #0f171a;
  --builder-grid-line: rgba(165, 179, 184, 0.16);
  --builder-floor-fill: #202a2f;
  --builder-floor-line: #3a4a50;
  --builder-wall-fill: #263a3c;
  --builder-wall-line: #5a7478;
  --builder-door-fill: rgba(242, 189, 104, 0.16);
  --builder-door-line: #f2bd68;
  --builder-object-line: #dce9eb;
  --avatar-stage-floor: #1c272b;
  --avatar-stage-backdrop: #151f23;
}

:root[data-theme="dark"] body {
  background: var(--surface-app);
  color: var(--text-primary);
}

:root[data-theme="dark"] header,
:root[data-theme="dark"] section,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .viewer-bar,
:root[data-theme="dark"] .toolbar,
:root[data-theme="dark"] .action-menu,
:root[data-theme="dark"] .portal-panel,
:root[data-theme="dark"] .shard-knock-panel,
:root[data-theme="dark"] .board-request-panel,
:root[data-theme="dark"] .artifact-panel,
:root[data-theme="dark"] .audio-panel,
:root[data-theme="dark"] .diagnostics-panel,
:root[data-theme="dark"] .voice-diagnostics-panel,
:root[data-theme="dark"] .avatar-panel,
:root[data-theme="dark"] .room-edit-panel,
:root[data-theme="dark"] .web-browser-panel,
:root[data-theme="dark"] .conference-stage {
  border-color: var(--border-subtle) !important;
  background: color-mix(in srgb, var(--surface-panel) 94%, transparent) !important;
  color: var(--text-primary);
  box-shadow: var(--shadow-raised);
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .toggle,
:root[data-theme="dark"] .participant-badge,
:root[data-theme="dark"] .tool-segment,
:root[data-theme="dark"] .board-mode-segment,
:root[data-theme="dark"] .tool-button,
:root[data-theme="dark"] .board-mode-button,
:root[data-theme="dark"] .brand,
:root[data-theme="dark"] .chip,
:root[data-theme="dark"] .select,
:root[data-theme="dark"] .button,
:root[data-theme="dark"] button {
  border-color: var(--border-subtle) !important;
  background: var(--surface-control) !important;
  color: var(--text-primary) !important;
}

:root[data-theme="dark"] .brand {
  color: var(--text-primary) !important;
}

:root[data-theme="dark"] .nameplate .name-text {
  color: var(--roster-status-color, #ffffff) !important;
}

:root[data-theme="dark"] .nameplate .roster-meter-fill {
  background: var(--roster-status-color, currentColor) !important;
}

:root[data-theme="dark"] .button.active,
:root[data-theme="dark"] button.active,
:root[data-theme="dark"] .tool-button.active,
:root[data-theme="dark"] .board-mode-button.active,
:root[data-theme="dark"] .artifact-drive-button.active {
  border-color: var(--border-strong) !important;
  background: var(--accent) !important;
  color: var(--accent-contrast) !important;
}

:root[data-theme="dark"] .button.secondary,
:root[data-theme="dark"] button.secondary {
  background: var(--surface-control);
  color: var(--text-primary);
}

:root[data-theme="dark"] .muted,
:root[data-theme="dark"] .card-meta,
:root[data-theme="dark"] .current-meta,
:root[data-theme="dark"] .artifact-manager-meta,
:root[data-theme="dark"] .artifact-detail-label,
:root[data-theme="dark"] .chip-muted {
  color: var(--text-muted) !important;
}

:root[data-theme="dark"] .artifact-manager-row,
:root[data-theme="dark"] .artifact-preview,
:root[data-theme="dark"] .svs-view-popover,
:root[data-theme="dark"] .artifact-table-row,
:root[data-theme="dark"] .artifact-table-head,
:root[data-theme="dark"] .artifact-breadcrumbs,
:root[data-theme="dark"] .artifact-table,
:root[data-theme="dark"] .artifact-manager-list,
:root[data-theme="dark"] .artifact-drive-list,
:root[data-theme="dark"] .artifact-detail-pane,
:root[data-theme="dark"] .artifact-detail-row,
:root[data-theme="dark"] .queue-row,
:root[data-theme="dark"] .artifact-row {
  border-color: var(--border-subtle) !important;
  background: var(--surface-panel-soft) !important;
  color: var(--text-primary);
}

:root[data-theme="dark"] .artifact-sort-button {
  border-color: var(--border-subtle) !important;
  background: transparent !important;
  color: var(--text-primary) !important;
}

:root[data-theme="dark"] .artifact-table-cell,
:root[data-theme="dark"] .artifact-detail-title,
:root[data-theme="dark"] .viewer-title,
:root[data-theme="dark"] .current-name,
:root[data-theme="dark"] .participant-name,
:root[data-theme="dark"] .artifact-panel-title {
  color: var(--text-primary) !important;
}

:root[data-theme="dark"] .artifact-manager-row.active,
:root[data-theme="dark"] .artifact-table-row.active {
  border-color: var(--border-strong) !important;
  background: rgba(56, 189, 176, 0.16) !important;
}

:root[data-theme="dark"] .artifact-file-icon,
:root[data-theme="dark"] .pill {
  background: rgba(56, 189, 176, 0.16) !important;
  color: var(--accent-strong) !important;
}

:root[data-theme="dark"] .artifact-breadcrumb-button {
  color: var(--text-primary);
}

:root[data-theme="dark"] .artifact-breadcrumb-button:hover,
:root[data-theme="dark"] .artifact-breadcrumb-button:focus-visible {
  background: rgba(56, 189, 176, 0.16);
}

:root[data-theme="dark"] a {
  color: var(--accent-strong);
}

.theme-toggle-button {
  white-space: nowrap;
}