/* ===== base.css: 5DO Design System — Blue Tone =====
 *
 * THE TOKENS BELOW ARE THE WHOLE PALETTE. Before adding a literal colour,
 * radius or font-size anywhere in public/css/, check that it is not already
 * here under a name.
 *
 * Why this is spelled out: an audit on 2026-11-02 found 177 distinct colour
 * literals across these files against 26 token uses. The token block was
 * already good — the CSS simply bypassed it, mostly by writing the SAME cyan
 * at twelve different alphas (.03 .04 .05 .06 .08 .1 .12 .15 .2 .25 .3 …),
 * black scrims at five, and white washes at four. Likewise 12 border-radius
 * values and 14 font-sizes, nine of them crammed between 10px and 16px.
 *
 * Nothing about that is a bug a user can report. It reads as cheapness: the
 * eye registers that a card corner, its thumbnail corner and the star on top
 * of it are 16px, 12px and 10px, and concludes the thing was thrown together.
 *
 * tests/design-tokens.test.mjs holds the line. If it fails, you added a value
 * that already has a name.
 */
@import url('./tokens.css');

/* ── Reset ── */
html, body { width: 100%; max-width: 100%; height: 100%; margin: 0; padding: 0; overflow-x: hidden; }
* { box-sizing: border-box; }

body {
  margin: 0; background: var(--bg); color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'Noto Sans KR', sans-serif;
  font-size: var(--t-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
.hidden { display: none !important; }
#verBadge { display: none; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--tint); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--tint-strong); }

/* ── Selection ── */
::selection { background: var(--tint-strong); color: var(--text-primary); }

/* ── Focus visible ── */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }