/* Default palettes mirror theme-palettes.json; keep the palette parity test passing. */
:root {
  color-scheme: light;
  --background: #F7F5FA;
  --background-top: #FFFFFF;
  --background-secondary: #EFEBF4;
  --surface: #FFFFFF;
  --line: #D8D1E3;
  --ink: #241C30;
  --muted: #6D617D;
  --description: #5F566E;
  --hover: #E8E2F0;
  --selected: #FCE7ED;
  --focus: #B41139;
  --brand: #FA1E4E;
  --button: #D91443;
  --button-hover: #C6113B;
  --button-text: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
  color-scheme: dark;
  --background: #0E0C12;
  --background-top: #000000;
  --background-secondary: #121019;
  --surface: #1B1825;
  --line: #484063;
  --ink: #F4F1F8;
  --muted: #A69DB8;
  --description: #BDB8D1;
  --hover: #2C2538;
  --selected: #3C2030;
  --focus: #FF7394;
  --brand: #FA1E4E;
  --button: #D91443;
  --button-hover: #C6113B;
  --button-text: #FFFFFF;
}
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #0E0C12;
  --background-top: #000000;
  --background-secondary: #121019;
  --surface: #1B1825;
  --line: #484063;
  --ink: #F4F1F8;
  --muted: #A69DB8;
  --description: #BDB8D1;
  --hover: #2C2538;
  --selected: #3C2030;
  --focus: #FF7394;
  --brand: #FA1E4E;
  --button: #D91443;
  --button-hover: #C6113B;
  --button-text: #FFFFFF;
}

:root, .theme-preview {
  --accent: var(--brand);
  --on-brand: var(--button-text);
  --brand-hover: var(--focus);
  --brand-dark: var(--background-secondary);
  --wine: var(--background-secondary);
  --soft: var(--hover);
  --brand-soft: var(--selected);
  --brand-line: color-mix(in srgb, var(--brand) 40%, transparent);
  --brand-glow: color-mix(in srgb, var(--brand) 20%, transparent);
  --line-soft: color-mix(in srgb, var(--line) 40%, transparent);
  --line-faint: color-mix(in srgb, var(--line) 20%, transparent);
  --header-overlay: color-mix(in srgb, var(--background-top) 96%, transparent);
  --surface-overlay: color-mix(in srgb, var(--surface) 95%, transparent);
  --overlay: #000000B3;
  --shadow: 0 8px 28px #00000014;
}
html, body { background: var(--background); color: var(--ink); }
html { scrollbar-color: var(--line) var(--background-secondary); }
h1, h2, h3 { color: var(--ink); }
::selection { background: var(--selected); color: var(--ink); }
input, textarea, select { accent-color: var(--button); }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--background-secondary) inset;
  caret-color: var(--ink);
}
.appearance-switch { display:flex; align-items:center; gap:8px; margin:0; color:var(--description); font-size:12px; font-weight:400; }
.appearance-switch .select-control { margin:0; width:auto; min-width:110px; }
.appearance-switch select { font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:8px 12px; min-width:110px; cursor:pointer; }
.appearance-switch select:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
.appearance-switch select:hover { background:var(--hover); }
.auth-appearance { justify-content:flex-end; margin-bottom:24px; }