/* ==========================================================================
   Design tokens — mirror the CSS variables Trevor's mockups use verbatim.
   These are the single source of truth for colours and type families; every
   other stylesheet reaches for them via var(--token).
   ========================================================================== */

:root {
  --paper:        #F2ECDE;
  --paper-2:      #EAE2D0;
  --ink:          #151210;
  --ink-soft:     #3a332c;
  --ink-mute:     #6b6358;
  --rule:         #d8cfbb;
  --accent:       #FFC65F;   /* yellow — the only decorative accent (highlights, dots, accent words on ink) */
  --accent-ink:   #E4572E;   /* red — reserved for in-prose link underlines ONLY (Trevor's rule) */

  /* --display  = alias of --sans since the July 2026 reskin. Big type is
     Inter Tight 800, tight and ink-only; the reading surface stays serif.
     Rules that use --display must set their own weight (800 for heroes). */
  --display: "Inter Tight", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --serif:   "Times New Roman", Times, serif;
  --sans:    "Inter Tight", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --mono:    "DM Mono", ui-monospace, Menlo, monospace;

  /* Layout */
  --wrap-max:    1320px;
  --wrap-pad:    24px;
  --prose-max:   720px;
}

@media (min-width: 768px) {
  :root { --wrap-pad: 32px; }
}
@media (min-width: 1200px) {
  :root { --wrap-pad: 40px; }
}