/* Four distinct palettes. Explicit surface roles match the approved mockup. */
:root[data-color-theme="office"] {
  --palette-page: #f1f1f3;
  --palette-panel: #ffffff;
  --palette-ink: #25252a;
  --palette-muted: #62626c;
  --palette-accent: #4e4e59;
  --palette-row: #e7e7ec;
  --palette-selected: #dcdce3;
  --palette-line: #d2d2dc;
  --palette-warn: #945326;
}
:root[data-color-theme="office"][data-theme="dark"] {
  --palette-page: #202024;
  --palette-panel: #2b2b31;
  --palette-ink: #f3f3f6;
  --palette-muted: #bebec9;
  --palette-accent: #dedee8;
  --palette-row: #383840;
  --palette-selected: #494950;
  --palette-line: #51515b;
  --palette-warn: #edbd95;
}
:root[data-color-theme="cobalt"], :root:not([data-color-theme]) {
  --palette-page: #edf2fc;
  --palette-panel: #fbfcff;
  --palette-ink: #202b40;
  --palette-muted: #566580;
  --palette-accent: #2c54bd;
  --palette-row: #dce6fb;
  --palette-selected: #cbdafa;
  --palette-line: #c4d1ec;
  --palette-warn: #945326;
}
:root[data-color-theme="cobalt"][data-theme="dark"], :root:not([data-color-theme])[data-theme="dark"] {
  --palette-page: #192131;
  --palette-panel: #242f46;
  --palette-ink: #edf2fc;
  --palette-muted: #afbdd4;
  --palette-accent: #a6beff;
  --palette-row: #2d3e60;
  --palette-selected: #304571;
  --palette-line: #475f89;
  --palette-warn: #edbd95;
}
:root[data-color-theme="sage"] {
  --palette-page: #eaf1e9;
  --palette-panel: #fbfdfa;
  --palette-ink: #24382c;
  --palette-muted: #576b5d;
  --palette-accent: #326346;
  --palette-row: #d7e7d6;
  --palette-selected: #c6ddc5;
  --palette-line: #c4d5c2;
  --palette-warn: #925429;
}
:root[data-color-theme="sage"][data-theme="dark"] {
  --palette-page: #1c2820;
  --palette-panel: #28392d;
  --palette-ink: #edf5ee;
  --palette-muted: #b5cab8;
  --palette-accent: #add5ad;
  --palette-row: #354d3b;
  --palette-selected: #35533d;
  --palette-line: #536e58;
  --palette-warn: #edbd95;
}
:root[data-color-theme="lavender"] {
  --palette-page: #f2eff7;
  --palette-panel: #fcfaff;
  --palette-ink: #332b40;
  --palette-muted: #6b607b;
  --palette-accent: #73529b;
  --palette-row: #eae3f4;
  --palette-selected: #e8dcf5;
  --palette-line: #ded4e9;
  --palette-warn: #925429;
}
:root[data-color-theme="lavender"][data-theme="dark"] {
  --palette-page: #231f2b;
  --palette-panel: #2f2939;
  --palette-ink: #f0eaf8;
  --palette-muted: #bfb1d0;
  --palette-accent: #d0b5f0;
  --palette-row: #3c3349;
  --palette-selected: #49345e;
  --palette-line: #52455f;
  --palette-warn: #edbd95;
}
:root {
  --glass-ink: var(--palette-ink);
  --glass-secondary: var(--palette-muted);
  --glass-muted: var(--palette-muted);
  --glass-accent: var(--palette-accent);
  --glass-line: var(--palette-line);
  --glass-pane: color-mix(in srgb, var(--palette-panel) 70%, transparent);
  --glass-float: color-mix(in srgb, var(--palette-panel) 48%, transparent);
  --glass-field: color-mix(in srgb, var(--palette-panel) 62%, transparent);
  --glass-row: color-mix(in srgb, var(--palette-panel) 36%, transparent);
  --glass-hover: color-mix(in srgb, var(--palette-panel) 78%, transparent);
  --glass-selected: color-mix(in srgb, var(--palette-accent) 14%, transparent);
  --reports-page: var(--palette-page);
  --reports-background: radial-gradient(ellipse at 8% 0%, color-mix(in srgb, var(--palette-accent) 12%, transparent), transparent 55%), var(--reports-page);
}
:root[data-theme="dark"] {
  --glass-pane: color-mix(in srgb, var(--palette-panel) 66%, transparent);
  --glass-float: color-mix(in srgb, var(--palette-panel) 26%, transparent);
  --glass-field: color-mix(in srgb, var(--palette-page) 46%, transparent);
  --glass-row: color-mix(in srgb, var(--palette-ink) 7%, transparent);
  --glass-hover: color-mix(in srgb, var(--palette-ink) 14%, transparent);
  --glass-selected: color-mix(in srgb, var(--palette-accent) 18%, transparent);
}
:root, :root[data-theme="dark"] { --page: var(--reports-page); }
/* The same soft, rounded controls in every palette, including Office neutral. */
html :is(.tracker-btn, .hud-project-btn, .board-tab, .modal-panel button, .visitor-go, .pin-go, .desk-start),
html #work-tabs button, html #view-tabs button, html :is(.tabs, .viewtabs) button,
html #invoice-preview-bar button { border-radius: 12px; }
html #invoice-lang button[aria-pressed="true"] { background: var(--glass-selected); color: var(--glass-accent); }
#character-settings-open {
  pointer-events: auto; cursor: pointer; margin-top: 6px; padding: 6px 10px;
  color: var(--glass-ink); background: var(--glass-row); border: 1px solid var(--glass-line);
  border-radius: 12px; font: 12px var(--glass-font);
}
#character-settings-open[hidden] { display: none; }
html #character-settings { margin: auto; inset: 0; width: min(480px, calc(100vw - 32px)); padding: 26px; box-sizing: border-box; max-height: 90vh; overflow: auto; }
#character-settings::backdrop { background: var(--glass-scrim); }
.character-settings-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
html #character-settings h2 { margin: 0; font-size: 22px; }
.character-settings-person { color: var(--glass-muted); font-size: 13px; margin: 8px 0 26px; }
#character-settings fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
#character-settings legend { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.character-theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.character-theme-choice { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; border: 1px solid var(--glass-line); background: var(--glass-row); cursor: pointer; font-size: 13px; }
.character-theme-choice:has(input:checked) { background: var(--glass-selected); border-color: var(--glass-accent); }
.character-theme-choice:has(input:focus-visible) { outline: 2px solid var(--glass-accent); outline-offset: 2px; }
.character-theme-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.character-theme-choice:has(input:disabled) { cursor: wait; opacity: .65; }
.character-theme-swatch { width: 22px; height: 22px; border-radius: 8px; border: 1px solid rgba(127,127,127,.25); flex: none; }
.character-graphics { margin-top: 24px !important; }
.character-graphics[hidden] { display: none; }
.character-graphics-note { color: var(--glass-muted); font-size: 12px; margin: 10px 0 0; }
.character-settings-status { min-height: 16px; margin: 18px 0 0; color: var(--glass-muted); font-size: 12px; }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root, :root[data-theme="dark"] {
    --glass-pane: var(--palette-panel); --glass-float: var(--palette-panel); --glass-field: var(--palette-panel);
  }
}