/* THE BREW METHOD — design tokens. The whole brand lives here: change a value, the site follows.
   Colours that need transparency are also given as "R G B" so CSS can write rgb(var(--ink-rgb) / .5)
   and JS (Vision word reveal) can read them. Keep each pair in sync. */
:root{
  /* palette — warm coffee + quiet tech */
  --ink:#0E0B09;        --ink-rgb:14 11 9;          /* espresso black: base of every dark section */
  --paper:#F2EDE6;      --paper-rgb:242 237 230;    /* crema: light sections and text on dark */
  --charcoal:#1A1613;                               /* roasted charcoal: "How it works" */
  --fog:#D9D0C4;        --fog-rgb:217 208 196;      /* unrevealed words on paper */
  --accent:#C8A27A;     --accent-rgb:200 162 122;   /* caramel: buy buttons, counters, small highlights */
  --steel:#8A8C8E;                                  /* cool grey: technical labels */
  --stone:#8F877E;                                  /* warm neutral on dark */
  --muted:#5A524B;  --muted-2:#4B443E;  --muted-3:#3D3631;  --muted-4:#6F665D;   /* text greys on paper */
  --frame:#E4DDD3;                                  /* image placeholder on paper */
  --hair-dark:rgb(var(--paper-rgb) / .16);
  --hair-light:rgb(var(--ink-rgb) / .14);

  /* type — Archivo (variable width) for display + wordmark, Instrument Sans for text, IBM Plex Mono for data */
  --f-display:"Archivo","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --f-body:"Instrument Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --mark-stretch:125%;  --mark-weight:700;          /* wordmark: wide grotesk, bold */

  --gutter:clamp(16px,4.2vw,64px);
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:dark;
}