/* ---------------------------------------------------------------------------
   wehumanhuman — shared design tokens
   One system for the app and the site: black & white type, one highlighter.
   --------------------------------------------------------------------------- */
:root {
  --paper: #FFFFFF;
  --soft: #F7F7F4;                       /* cards, raised surfaces */
  --ink: #111111;
  --grey: #6B6B6B;
  --line: #E5E5E1;

  --ink-70: rgba(17, 17, 17, 0.70);
  /* historically 0.45 — raised to 0.60 (≈4.9:1 on paper) so the small labels,
     dates and legends that use it meet WCAG AA. Keep decorative-only greys on
     --line / --ink-12 instead. */
  --ink-45: rgba(17, 17, 17, 0.60);
  --ink-12: rgba(17, 17, 17, 0.12);
  --ink-06: rgba(17, 17, 17, 0.06);

  --marker: #F9E44C;                     /* the highlighter */
  --marker-soft: rgba(249, 228, 76, 0.55);

  --serif: "Source Serif 4", Georgia, serif;  /* the most claude-ish serif google fonts offers */
  --sans: "Sora", -apple-system, sans-serif;

  --radius: 12px;
  --radius-sm: 10px;
}

html, body { overflow-x: clip; }

::selection { background: var(--marker); }

/* highlighter-pen stroke */
.mark {
  background: linear-gradient(100deg,
    transparent 0%, var(--marker-soft) 4%,
    var(--marker-soft) 95%, transparent 100%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0.08em 0.35em;
  margin: 0 -0.15em;
  border-radius: 0.3em 0.5em 0.4em 0.35em;
}

/* wordmark: we(italic) human(regular) human(bold) — see manifesto clause 05 */
.wordmark, .wm {
  font-family: var(--serif);
  font-style: normal;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
}
.wordmark em, .wm em { font-style: italic; font-weight: 400; }
.wordmark strong, .wm strong { font-weight: 700; }