/* StudyPal color contract. Keep DESIGN.md in sync. */
:root {
  color-scheme: light;
  --primary: #006b78;
  --primary-dark: #00535e;
  --primary-light: #edf5f4;
  --action: #006b78;
  --action-hover: #00535e;
  --on-action: #ffffff;
  --bg: #ffffff;
  --card: #ffffff;
  --card-alt: #edf5f4;
  --text: #18343e;
  --text-secondary: #526770;
  --muted: #526770;
  --border: #cedddb;
  --field-border: #6f898f;
  --highlight: #ffca76;
  --highlight-hover: #ffda9d;
  --on-highlight: #18343e;
  --feature-bg: #006b78;
  --feature-text: #ffffff;
  --feature-muted: #e0f0f3;
  --feature-border: #70a4b1;
  --danger: #a4251d;
  --danger-bg: #fff2ef;
  --success: #17653b;
  --success-bg: #e7f4ec;
  --warning: #805100;
  --warning-bg: #fff3d6;
  --info: #245e91;
  --info-bg: #e9f2fa;
  --purple: #7041a0;
  --purple-light: #f2eafa;
  --pink: #a12965;
  --font-ui: 'Hanken Grotesk', system-ui, sans-serif;
  --font-reading: 'Lora', Georgia, serif;
}
:root[data-theme="paper"] {
  color-scheme: light;
  --primary: #914832;
  --primary-dark: #783b29;
  --primary-light: #f1e3d8;
  --action: #914832;
  --action-hover: #783b29;
  --bg: #faf5ef;
  --card: #fffdf9;
  --card-alt: #f4ebe2;
  --text: #342820;
  --text-secondary: #6c594d;
  --muted: #6c594d;
  --border: #ddcbbc;
  --field-border: #9a8170;
  --feature-bg: #783b29;
  --feature-muted: #f6e9dc;
  --feature-border: #ba927e;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --primary: #8edbe1;
  --primary-dark: #b6edf0;
  --primary-light: #203d43;
  --bg: #112329;
  --card: #192f36;
  --card-alt: #203a41;
  --text: #edf6f5;
  --text-secondary: #bfd0d3;
  --muted: #bfd0d3;
  --border: #486169;
  --field-border: #78969d;
  --feature-bg: #193d46;
  --feature-muted: #c6dfe3;
  --feature-border: #6b939d;
  --danger: #ffb4a8;
  --danger-bg: #482a29;
  --success: #99dfb2;
  --success-bg: #1d3c30;
  --warning: #ffca76;
  --warning-bg: #443820;
  --info: #aad6fc;
  --info-bg: #203b53;
  --purple: #d4b5f2;
  --purple-light: #352944;
  --pink: #f3b2d0;
}
/* Compatibility names resolve to the selected theme, never to page palettes. */
:root {
  --card-bg: var(--card); --bg-dark: var(--bg); --paper: var(--bg);
  --secondary: var(--text-secondary); --secondary-dark: var(--text);
  --text-light: var(--muted); --text-muted: var(--muted); --text-soft: var(--muted);
  --primary-hover: var(--primary-dark);
  --wash: var(--primary-light); --alt: var(--card-alt);
  --ink: var(--text); --ink2: var(--text-secondary); --ink3: var(--muted);
  --soft: var(--text-secondary); --mute: var(--muted);
  --line: var(--border); --rule: var(--border); --hair: var(--border);
  --child: var(--primary); --child-bg: var(--primary-light);
  --parent: var(--primary); --parent-bg: var(--primary-light);
  --setup: var(--warning); --setup-bg: var(--warning-bg); --flag: var(--danger);
  --green: var(--success); --green-light: var(--success-bg); --good: var(--success);
  --red: var(--danger); --red-light: var(--danger-bg); --bad: var(--danger);
  --late: var(--danger); --late-bg: var(--danger-bg); --soon: var(--warning);
  --blue: var(--info); --blue-light: var(--info-bg);
  --amber: var(--warning); --amber-dark: var(--warning); --amber-mid: var(--highlight);
  --amber-light: var(--warning-bg); --amber-pale: var(--warning-bg);
  --entry-ink: var(--text); --entry-muted: var(--text-secondary);
  --entry-blue: var(--primary); --entry-wash: var(--primary-light);
  --entry-rule: var(--border); --entry-yellow: var(--highlight);
}
/* A compact control in shared navigation, or a separate bar on standalone pages. */
.theme-control { display:inline-flex; align-items:center; gap:8px; margin:0; font:14px/1.4 var(--font-ui); color:var(--text-secondary); flex-shrink:0; }
.theme-control select { width:auto; max-width:130px; min-height:44px; margin:0; padding:8px 28px 8px 10px; border:1px solid var(--field-border); border-radius:4px; background:var(--card); color:var(--text); font:inherit; cursor:pointer; }
.theme-control select:focus-visible { outline:3px solid var(--primary); outline-offset:3px; }
.theme-toolbar { display:flex; justify-content:flex-end; flex-shrink:0; padding:12px 20px; background:var(--bg); border-bottom:1px solid var(--border); }
.site-header:has(.theme-control) { flex-wrap:wrap; gap:16px; }
@media(max-width:640px) { .site-header>.theme-control { margin-left:auto; } }
@media print { .theme-control,.theme-toolbar { display:none!important; } }