/* ============================================================
   tokens.css — Design tokens (CSS custom properties) + base reset
   ============================================================ */

:root {
  --bg0: #181b24;
  --bg1: #1f2333;
  --bg2: #272b3d;
  --bg3: #2e3347;
  --bgE: #1e2235;
  --border: #272c40;
  --border2: #333750;
  --pb: rgba(46, 51, 71, 0.6);
  --t0: #eef0f8;
  --t1: #b8c0d8;
  --t2: #6e7899;
  --t3: #404666;
  --acc: #6674ff;
  --acc2: #99a5ff;
  --acc-soft: rgba(102, 116, 255, 0.14);
  --amber: #f0a020;
  --amber2: #f5c860;
  --green: #22a878;
  --green-soft: rgba(34, 168, 120, 0.14);
  --red: #e05858;
  --pink: #d4537e;
  --max: 1200px;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg0);
  color: var(--t1);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
::selection {
  background: var(--acc-soft);
  color: var(--t0);
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--bg3);
  border-radius: 4px;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font-family: inherit;
  cursor: pointer;
}
.mono {
  font-family: "IBM Plex Mono", monospace;
}
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px;
}

/* ── Theme toggle icon visibility (CSS-driven, never JS) ─── */
/* Dark mode (default): show moon, hide sun */
.icon-sun  { display: none; }
.icon-moon { display: block; }

/* Light mode: show sun, hide moon */
.light .icon-sun  { display: block; }
.light .icon-moon { display: none; }