/* Milk River Plumbing LLC: design tokens.
   World: a USGS topo quadrangle of the Milk River valley. See DESIGN.md. */

:root {
  /* color */
  --paper: #ECEFEE;
  --panel: #F5F8F7;
  --ink: #1D2A32;
  --muted: #4E5C66;
  --river: #33607F;
  --river-deep: #27506C;
  --copper: #8C4F2B;
  --night: #14212B;
  --night-2: #182833;
  --pale-silt: #BCD2DE;
  --pale-copper: #D9A886;
  --contour: rgba(140, 79, 43, 0.28);
  --contour-faint: rgba(140, 79, 43, 0.16);
  --hairline: rgba(29, 42, 50, 0.16);
  --hairline-night: rgba(188, 210, 222, 0.22);
  --scrim: rgba(20, 33, 43, 0.44);

  /* type */
  --display: "Yrsa", "Georgia", serif;
  --body: "Sarpanch", "Segoe UI", "Arial", sans-serif;
  --size-0: 1rem;          /* 16px body */
  --size--1: 0.8125rem;    /* 13px captions, sources */
  --size-1: 1.1875rem;     /* 19px leads */
  --size-h3: 1.3125rem;
  --size-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.375rem);
  --size-h1: clamp(2.375rem, 1.5rem + 4vw, 3.75rem);
  --size-phone: clamp(1.875rem, 1.2rem + 3.4vw, 3.25rem);

  /* space, 8px base */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-6: 48px;
  --s-8: 64px;
  --s-12: 96px;
  --s-16: 128px;

  /* structure */
  --measure: 62ch;
  --max: 1160px;
  --header-h: 64px;

  /* motion: H2 slow and settled */
  --t-fast: 250ms;
  --t-rise: 550ms;
  --ease: cubic-bezier(0.25, 0.6, 0.3, 1);
}