:root{
  /* The five. Nothing else gets a hex literal anywhere in this project. */
  --cream:#F5EBDF;      /* ground */
  --clay-raw:#D9A68B;   /* the working surface */
  --clay-fired:#9C4A32; /* terracotta, the accent */
  --taupe:#8A7561;      /* the logo brown — type and rules */
  --light:#7A1E18;      /* the red light itself */

  /* Roles, so components never reach for a raw material name */
  --ground:var(--cream);
  --surface:var(--clay-raw);
  --accent:var(--clay-fired);
  --ink:var(--taupe);        /* display type and rules */
  --ink-body:var(--light);   /* body copy — taupe fails AA on both grounds */

  /* Type */
  --face-display:"Frank Ruhl Libre",Georgia,"Times New Roman",serif;
  --face-body:"Assistant","Helvetica Neue",Arial,sans-serif;
  --step--1:0.82rem;
  --step-0:1rem;
  --step-1:1.33rem;
  --step-2:1.9rem;
  --step-3:2.9rem;
  --step-4:clamp(2.4rem,5.4vw,4.2rem);
  --step-5:clamp(3.6rem,11.5vw,9.5rem);   /* display — the hero carries the page */
  --tracking-label:0.22em;
  --tracking-display:-0.025em;

  /* Material: a clay/paper tooth over flat grounds. No colour of its own. */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --rule:1px solid var(--taupe);

  /* Space */
  --s-1:0.5rem; --s-2:1rem; --s-3:1.75rem; --s-4:3rem; --s-5:5rem; --s-6:8rem;
  --measure:62ch;
  --page:1240px;
}