/* Shared color system. data-theme is set before paint. */
:root, [data-theme="dark"] {
  color-scheme: dark;
  --ink: #0f1115;
  --ink-2: #141820;
  --panel: #181c24;
  --panel-2: #1c212b;
  --edge: #2a3140;
  --text: #eef1f6;
  --muted: #9aa3b2;
  --faint: #6b7383;
  --amber: #5b8def;
  --amber-2: #8eb0f5;
  --amber-ink: #ffffff;
  --moss: #7ec8e3;
  --dust: #e0a04a;
  --danger: #e06a5c;
  --chip: #222836;
  --hover: #222836;
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --display: "Segoe UI", system-ui, sans-serif;
  --radius: 12px;
  --theme-color: #0f1115;
}
[data-theme="light"] {
  color-scheme: light;
  --ink: #f4f5f7;
  --ink-2: #eef0f4;
  --panel: #ffffff;
  --panel-2: #f8f9fb;
  --edge: #e2e6ee;
  --text: #151921;
  --muted: #3a4250;
  --faint: #546074;
  --amber: #3b6fd9;
  --amber-2: #2f5bb8;
  --amber-ink: #ffffff;
  --moss: #3a8fb5;
  --dust: #c8862a;
  --danger: #d14b3d;
  --chip: #eef1f6;
  --hover: #eef1f6;
  --shadow: 0 6px 20px rgba(20, 28, 45, 0.08);
  --theme-color: #f4f5f7;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--ink); color: var(--text); font-family: var(--font); }
.theme-btn {
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid var(--edge); background: var(--panel); color: var(--text);
  cursor: pointer; display: grid; place-items: center; flex: 0 0 auto;
}
.theme-btn:hover { border-color: var(--amber); }
.theme-btn svg { width: 18px; height: 18px; }
[data-theme="dark"] .icon-sun { display: none; }
[data-theme="light"] .icon-moon { display: none; }