/* Unstuck — brand tokens. Imported by the landing and the app.
   Variables: exactly the names in brand.md. Base element styles only (zero-specificity :where()), no component classes.
   Each page loads the fonts itself:
   https://fonts.googleapis.com/css2?family=Young+Serif&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Mono:wght@200..800&display=swap
   Brand radius: 18px cards, 12px controls, 999px chips and bubbles.
   Brand shadow: 0 1px 2px rgba(30,26,43,.06), 0 8px 24px rgba(30,26,43,.06). */

:root {
  --mist: #F2F0F7;    /* page background — cool lilac grey */
  --card: #FFFFFF;    /* cards */
  --line: #DDD8EA;    /* borders */
  --ink: #1E1A2B;     /* text */
  --ink-2: #5E5873;   /* secondary text */
  --apricot: #FF9466; /* the "unstuck" moment, primary button bg (ink text) */
  --teal: #0E7C70;    /* resolved / success (text-safe on white) */
  --snag: #D13F5C;    /* raw errors, error-code text (AA on white only) */
  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--mist);
  color: var(--ink);
  font-family: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:where(h1, h2) {
  font-family: "Young Serif", Georgia, "Times New Roman", serif;
  font-weight: 400;
  color: var(--ink);
  text-wrap: balance;
}
:where(h1) { font-size: clamp(42px, 5.6vw, 80px); line-height: 1.04; }
:where(h2) { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.1; }

:where(code, kbd, samp, pre) {
  font-family: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

:where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(img, video) { max-width: 100%; height: auto; }
:where(a) { color: inherit; text-underline-offset: 0.18em; }

::selection { background: var(--apricot); color: var(--ink); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}