/* Three complete palettes on the same product: compare color without changing content. */
html[data-appearance='dawn'] { background: #FFFCFA; color-scheme: light; }
html[data-appearance='night'] { background: #101722; color-scheme: dark; }
html[data-appearance='nature'] { background: #FCFCF8; color-scheme: light; }
html[data-appearance='dawn'] .workspace-redesign {
  color-scheme: light;
  --color-bg: #F5EEE9;
  --color-surface: #FFFCFA;
  --color-text: #393238;
  --color-muted: #75656C;
  --color-brand: #94543E;
  --color-brand-hover: #7D4430;
  --color-brand-active: #693724;
  --color-tint: #F6E6DD;
  --color-border: #E6DAD5;
  --color-control-border: #A68F88;
  --color-disabled-bg: #ECE2DD;
  --color-gold: #946E36;
  --color-success: #3E7053;
  --color-warn: #8A5C25;
  --color-danger: #AA3C45;
  --color-on-brand: #FFFCFA;
  --workspace-chip: #EDE1DA;
  --workspace-hover: #EDE2DB;
  --workspace-shadow: #653B2410;
  --workspace-warning: #FCEDD6;
  --workspace-composer: #FFF8F2;
  --workspace-focus: #94543E24;
  --workspace-note: #F5E7DC;
  --workspace-source: #F8F0EB;
}
html[data-appearance='night'] .workspace-redesign {
  color-scheme: dark;
  --color-bg: #121D2C;
  --color-surface: #101722;
  --color-text: #E7EDF5;
  --color-muted: #A7B3C5;
  --color-brand: #E2BD7A;
  --color-brand-hover: #EFCF96;
  --color-brand-active: #D8AB60;
  --color-tint: #30302E;
  --color-border: #2C394C;
  --color-control-border: #7C8AA1;
  --color-disabled-bg: #293446;
  --color-gold: #E2BD7A;
  --color-success: #8AC5A6;
  --color-warn: #E8C48B;
  --color-danger: #F2A1A8;
  --color-on-brand: #172130;
  --workspace-chip: #243045;
  --workspace-hover: #1D2A3D;
  --workspace-shadow: #00000024;
  --workspace-warning: #3A3022;
  --workspace-composer: #182434;
  --workspace-focus: #E2BD7A2B;
  --workspace-note: #202C3B;
  --workspace-source: #1B2738;
}
html[data-appearance='nature'] .workspace-redesign {
  color-scheme: light;
  --color-bg: #EEF1E8;
  --color-surface: #FCFCF8;
  --color-text: #2C3B30;
  --color-muted: #626D5F;
  --color-brand: #4C6654;
  --color-brand-hover: #3D5545;
  --color-brand-active: #304637;
  --color-tint: #E4EBDD;
  --color-border: #DBE2D5;
  --color-control-border: #8B9A82;
  --color-disabled-bg: #E3E8DE;
  --color-gold: #8D713F;
  --color-success: #3E7053;
  --color-warn: #84632B;
  --color-danger: #AA3C45;
  --color-on-brand: #FCFCF8;
  --workspace-chip: #E1E7DA;
  --workspace-hover: #E4E9DD;
  --workspace-shadow: #3046370D;
  --workspace-warning: #F3ECD8;
  --workspace-composer: #F7F9F2;
  --workspace-focus: #4C665424;
  --workspace-note: #E8EDDF;
  --workspace-source: #F0F3E9;
}
.workspace-redesign .appearance-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  margin: 0 48px; padding: 8px 0 18px; border-bottom: 1px solid var(--color-border);
}
.workspace-redesign .appearance-label { font-size: 12px; color: var(--color-muted); }
.workspace-redesign .appearance-label small { font-size: 11px; margin-left: 12px; }
.workspace-redesign .appearance-options {
  display: flex; align-items: center; gap: 4px; border-radius: 999px;
  background: var(--color-bg); padding: 4px; border: 1px solid var(--color-border);
}
.workspace-redesign .appearance-options button {
  display: inline-flex; gap: 8px; align-items: center; justify-content: center;
  min-height: 36px; padding: 6px 14px; border-radius: 999px; font-size: 12px;
  background: transparent; color: var(--color-muted); border: 1px solid transparent;
}
.workspace-redesign .appearance-options button:hover { color: var(--color-text); }
.workspace-redesign .appearance-options button[aria-pressed='true'] {
  background: var(--color-surface); border-color: var(--color-border); color: var(--color-text);
  box-shadow: 0 2px 6px var(--workspace-shadow);
}
.appearance-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid #00000026; }
[data-appearance-choice='dawn'] .appearance-swatch { background: #E9B99F; }
[data-appearance-choice='night'] .appearance-swatch { background: #1B2B42; border-color: #73819A; }
[data-appearance-choice='nature'] .appearance-swatch { background: #8B9F79; }
.workspace-redesign .appearance-feedback:not(.sr-only) { margin: 8px 48px 0; font-size: 12px; color: var(--color-warn); }
.workspace-redesign .button.primary { color: var(--color-on-brand); }
.workspace-redesign .button.primary:disabled { color: var(--color-muted); }
.workspace-redesign .toast { background: var(--color-text); color: var(--color-surface); }
.workspace-redesign .skip-link { background: var(--color-surface); }
.workspace-redesign .detail-panel::backdrop { background: #060D1C66; }
.workspace-redesign .pwa-bar button { background: var(--color-surface); }
.workspace-redesign .graph-node:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 3px; }
.workspace-redesign input, .workspace-redesign audio { accent-color: var(--color-brand); }
.workspace-redesign .button.danger { color: #FFFFFF; }
html[data-appearance='night'] .workspace-redesign .button.danger { background: #AB3C49; }
@media (max-width: 1199px) and (min-width: 1024px) {
  .workspace-redesign .appearance-bar { margin: 0 32px; }
}
@media (max-width: 1023px) and (min-width: 768px) {
  .workspace-redesign .appearance-bar { margin: 0 36px; }
  .workspace-redesign .appearance-label small { display: none; }
}
@media (max-width: 767px) {
  .workspace-redesign .appearance-bar { margin: 0 22px; padding: 14px 0; gap: 8px; }
  .workspace-redesign .appearance-label { font-size: 11px; }
  .workspace-redesign .appearance-label small { display: none; }
  .workspace-redesign .appearance-options { gap: 0; padding: 3px; }
  .workspace-redesign .appearance-options button { min-height: 38px; padding: 6px 10px; font-size: 11px; gap: 6px; }
  .workspace-redesign .appearance-feedback:not(.sr-only) { margin-left: 22px; margin-right: 22px; }
}