/* fraction-ds — dist/css/base.css
   The document layer: what every page gets before a single component
   class is written. Reset, page surface, focus ring, scrollbars,
   selection, placeholders. Lifted from Design Canvas (the `resets` block
   at the top of its ds.css plus the `base` block of its tokens.css) and
   kept deliberately thin — this is not a normalize.css, it only settles
   the handful of defaults the system actually disagrees with.

   Loads after tokens.css and before ds.css. Writes no colour of its own:
   every value here is a var() from tokens.css. */

/* ── box model ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── fonts (vendored, never fetched) ──────────────────────────── */
@font-face {
  font-family: 'Inter';
  src: url("/assets/fonts/Inter-Variable-68d95a51.woff2") format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url("/assets/fonts/DMSans-Variable-97b33bb4.woff2") format('woff2');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

/* ── page ─────────────────────────────────────────────────────── */
html { height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── scoped themes ─────────────────────────────────────────────
   An element that pins a theme (data-theme="light|dark", tokens.css) is
   its own surface: it paints its background and ink from the tokens it
   just redeclared, instead of inheriting the page's already-computed
   colours. <html> is covered by body above. */
[data-theme]:not(:root) { background-color: var(--bg); color: var(--ink); }

/* ── focus ────────────────────────────────────────────────────────
   Mouse clicks get no ring, keyboard navigation always does. The ring is
   the accent, because the focused control IS the thing that needs
   noticing (Von Restorff), and it is the only "glow" in the system. */
*:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── inherited type ───────────────────────────────────────────── */
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg, video, canvas { display: block; max-width: 100%; }
::placeholder { color: var(--ink-3); opacity: 1; }

/* ── selection ────────────────────────────────────────────────── */
::selection { background: var(--accent-soft); }

/* ── scrollbars ───────────────────────────────────────────────────
   Thin, inked with the faintest ramp step, track invisible. A scrollbar
   is a position readout, not a control surface. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--ink-4) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--ink-4);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

/* ── motion ───────────────────────────────────────────────────────
   Nothing in the system runs past 120ms (Doherty). For anyone who asked
   the OS for less, it runs at zero. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
}