:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --primary: #8bbaff;
  --primary-hover: #b2d2ff;
  --on-primary: #fffaf0;
  --ink: #f6efdf;
  --ink-soft: #d4dfef;
  --muted: #a3b3ca;
  --subtle: #96a8c3;
  --canvas: #0a1224;
  --glass: #14213a;
  --glass-solid: #14213a;
  --glass-border: #2a3c59;
  --line: #2a3c59;
  --paper: var(--glass-solid);
  --field: #0e1a30;
  --nav: #0b162c;
  --nav-hover: #1c3457;
  --mint: #f1dfb8;
  --cream: #f1dfb8;
  --green: #91bdff;
  --green-soft: #1c3151;
  --amber: #efd19a;
  --amber-soft: #352e24;
  --red: #ffb0b3;
  --red-soft: #392330;
  --success: #9cdec1;
  --success-soft: #17362f;
  --focus-ring: #92bbff;
  --wash-green: rgba(79, 132, 234, .12);
  --wash-blue: rgba(59, 107, 221, .18);
  --glass-blur: 0;
  --shadow-card: 0 8px 24px rgba(0, 5, 18, .12);
  --shadow-raised: 0 20px 55px rgba(0, 5, 18, .28);
  --blue-gradient: linear-gradient(120deg, #234ec4, #2d6ccc);
  --blue-gradient-hover: linear-gradient(120deg, #2d5fd9, #3271ce);
  --canvas-gradient: radial-gradient(ellipse at 90% 0%, rgba(46, 98, 204, .17), transparent 48%), var(--canvas);
}
:root[data-theme="light"] {
  color-scheme: light;
  --primary: #2457b5;
  --primary-hover: #183f8e;
  --ink: #172c51;
  --ink-soft: #354966;
  --muted: #566782;
  --subtle: #61728a;
  --canvas: #f7f3e9;
  --glass: #fffcf5;
  --glass-solid: #fffcf5;
  --glass-border: #e2ddcf;
  --line: #dedfdc;
  --field: #fffef9;
  --green: #2457b5;
  --green-soft: #e8eefb;
  --amber: #805719;
  --amber-soft: #f7ecd3;
  --red: #b13d4b;
  --red-soft: #fce8e9;
  --success: #246a50;
  --success-soft: #e3f2e9;
  --focus-ring: #3976d3;
  --shadow-card: 0 6px 24px rgba(30, 52, 88, .045);
  --shadow-raised: 0 20px 55px rgba(30, 52, 88, .11);
  --canvas-gradient: radial-gradient(ellipse at 90% 0%, rgba(108, 157, 244, .12), transparent 48%), var(--canvas);
}
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  flex-shrink: 0; min-height: 42px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink-soft); background: var(--field); cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600;
}
.theme-toggle:hover { border-color: var(--primary); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
:root[data-theme="dark"] .theme-moon, :root[data-theme="light"] .theme-sun { display: none; }
@media (max-width: 680px) { .theme-toggle { width: 42px; padding: 9px; } .theme-toggle .theme-label { display: none; } }