/* Base for every page: the shared tokens and a small reset. Loaded first;
   site.css sets the palette and fonts on top of it, type.css (last) the type.
   (The tokens that were in use from the old scrollcraft.css, same names.) */

:root {
  --sc-gutter: clamp(1.25rem, 5vw, 5.5rem);

  /* space, 4px base */
  --sc-1: 0.25rem;  --sc-2: 0.5rem;   --sc-3: 0.75rem;  --sc-4: 1rem;
  --sc-5: 1.5rem;   --sc-6: 2rem;     --sc-7: 3rem;     --sc-8: 4rem;

  --sc-t-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --sc-t-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
  --sc-track-normal: -0.005em;
  --sc-track-wide: 0.08em;

  --sc-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --sc-d-fast: 160ms;  --sc-d-base: 240ms;

  --sc-z-stage: 1; --sc-z-copy: 20; --sc-z-chrome: 60;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--sc-canvas);
  color: var(--sc-ink);
  line-height: 1.62;
  letter-spacing: var(--sc-track-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
  overflow-x: clip;
}
img, video, canvas, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
:root { caret-color: var(--sc-accent); accent-color: var(--sc-accent); }
:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 3px;
  border-radius: 6px;
}
:where(a) { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
@supports (scrollbar-color: auto) {
  html { scrollbar-color: color-mix(in oklab, var(--sc-ink) 26%, transparent) transparent; scrollbar-width: thin; }
}
:where(table) { font-variant-numeric: tabular-nums; }