:root,
html[data-theme="light"] {
  color-scheme: light;
  --page-bg: #f4f4f0;
  --surface: #ffffff;
  --surface-rgb: 255, 255, 255;
  --surface-muted: rgba(255, 255, 255, 0.72);
  --surface-strong: rgba(255, 255, 255, 0.92);
  --text: #171717;
  --muted: #3f3f3a;
  --subtle: #52524c;
  --faint: #616159;
  --border: #d9d9d2;
  --border-strong: #1d1d1b;
  --button-bg: #ffffff;
  --button-text: #1d1d1b;
  --button-active-bg: #1d1d1b;
  --button-active-text: #ffffff;
  --navbar-bg: rgba(255, 255, 255, 0.82);
  --canvas-bg: #ffffff;
  --accent: #1d1d1b;
  --marker-color: #111827;
  --flash-ready-bg: #facc15;
  --flash-ready-border: #a16207;
  --flash-ready-text: #171717;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --page-bg: #121412;
  --surface: #1f241f;
  --surface-rgb: 31, 36, 31;
  --surface-muted: rgba(31, 36, 31, 0.78);
  --surface-strong: rgba(31, 36, 31, 0.94);
  --text: #f2f4ec;
  --muted: #c8cfbf;
  --subtle: #a9b19f;
  --faint: #9ca491;
  --border: #3d4538;
  --border-strong: #dce4d4;
  --button-bg: #202720;
  --button-text: #f2f4ec;
  --button-active-bg: #f2f4ec;
  --button-active-text: #121412;
  --navbar-bg: rgba(20, 23, 20, 0.88);
  --canvas-bg: #171a17;
  --accent: #dce4d4;
  --marker-color: #f8fafc;
  --flash-ready-bg: #facc15;
  --flash-ready-border: #fef08a;
  --flash-ready-text: #171717;
}

html[data-theme="rose"] {
  color-scheme: light;
  --page-bg: #fff1f5;
  --surface: #fffafa;
  --surface-rgb: 255, 250, 250;
  --surface-muted: rgba(255, 250, 250, 0.74);
  --surface-strong: rgba(255, 250, 250, 0.94);
  --text: #2a1820;
  --muted: #60434e;
  --subtle: #7d5b67;
  --faint: #8e6b77;
  --border: #efcbd7;
  --border-strong: #44212d;
  --button-bg: #fffafa;
  --button-text: #2a1820;
  --button-active-bg: #44212d;
  --button-active-text: #fffafa;
  --navbar-bg: rgba(255, 250, 250, 0.84);
  --canvas-bg: #fffafa;
  --accent: #44212d;
  --marker-color: #44212d;
  --flash-ready-bg: #fde68a;
  --flash-ready-border: #c27803;
  --flash-ready-text: #2a1820;
}

html[data-theme="mint"] {
  color-scheme: light;
  --page-bg: #effaf3;
  --surface: #fbfffc;
  --surface-rgb: 251, 255, 252;
  --surface-muted: rgba(251, 255, 252, 0.74);
  --surface-strong: rgba(251, 255, 252, 0.94);
  --text: #14251b;
  --muted: #365542;
  --subtle: #52705d;
  --faint: #68806f;
  --border: #c7e7d0;
  --border-strong: #1d3c28;
  --button-bg: #fbfffc;
  --button-text: #14251b;
  --button-active-bg: #1d3c28;
  --button-active-text: #fbfffc;
  --navbar-bg: rgba(251, 255, 252, 0.84);
  --canvas-bg: #fbfffc;
  --accent: #1d3c28;
  --marker-color: #1d3c28;
  --flash-ready-bg: #fde68a;
  --flash-ready-border: #a16207;
  --flash-ready-text: #14251b;
}

html[data-theme="sky"] {
  color-scheme: light;
  --page-bg: #eef6ff;
  --surface: #fbfdff;
  --surface-rgb: 251, 253, 255;
  --surface-muted: rgba(251, 253, 255, 0.76);
  --surface-strong: rgba(251, 253, 255, 0.94);
  --text: #122033;
  --muted: #354d67;
  --subtle: #526b87;
  --faint: #657d96;
  --border: #c8ddf5;
  --border-strong: #1e3a5f;
  --button-bg: #fbfdff;
  --button-text: #122033;
  --button-active-bg: #1e3a5f;
  --button-active-text: #fbfdff;
  --navbar-bg: rgba(251, 253, 255, 0.84);
  --canvas-bg: #fbfdff;
  --accent: #1e3a5f;
  --marker-color: #1e3a5f;
  --flash-ready-bg: #fde68a;
  --flash-ready-border: #a16207;
  --flash-ready-text: #122033;
}

.theme-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.theme-swatch {
  width: 24px;
  height: 24px;
  border: 1px solid var(--border-strong);
  background: var(--swatch);
  color: transparent;
  cursor: pointer;
  padding: 0;
}

.theme-swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--page-bg), 0 0 0 4px var(--border-strong);
}

.theme-swatch[data-theme-value="light"] {
  --swatch: #f4f4f0;
}

.theme-swatch[data-theme-value="dark"] {
  --swatch: #1f241f;
}

.theme-swatch[data-theme-value="rose"] {
  --swatch: #f9c9d8;
}

.theme-swatch[data-theme-value="mint"] {
  --swatch: #bce8c9;
}

.theme-swatch[data-theme-value="sky"] {
  --swatch: #b8d8fa;
}

@media (max-width: 640px) {
  .nav-actions {
    gap: 14px;
  }

  .theme-switcher {
    gap: 6px;
  }

  .theme-swatch {
    width: 22px;
    height: 22px;
  }
}