/* POTTER - design tokens
   Espresso-black rooms, parchment type, antique gold details and a pour of
   bottle green. Grenze Gotisch (display) + Alegreya Sans (body). */
:root {
  /* Surfaces */
  --color-bg: #16110b;           /* page, espresso near-black */
  --color-bg-2: #201810;         /* raised bands, cards */
  --color-bg-3: #0f0b07;         /* footer, deepest */
  --color-field: #1d150d;
  --color-green: #223528;        /* bottle-green band */

  /* Ink */
  --color-ink: #efe6d2;          /* parchment */
  --color-muted: #a89d85;

  /* Accent: antique gold */
  --color-gold: #c9a25a;
  --color-gold-dim: #8a7340;

  /* Lines */
  --color-line: rgba(239, 230, 210, .14);
  --color-line-strong: rgba(239, 230, 210, .3);

  /* Error on dark */
  --color-err: #e0937c;

  /* Type */
  --font-display: "Grenze Gotisch", "Georgia", serif;
  --font-body: "Alegreya Sans", "Avenir Next", -apple-system, sans-serif;

  --fs-200: .8125rem;
  --fs-300: .9375rem;
  --fs-400: 1.0625rem;
  --fs-500: 1.1875rem;
  --fs-600: clamp(1.35rem, 1.15rem + .6vw, 1.7rem);
  --fs-700: clamp(1.8rem, 1.4rem + 1.3vw, 2.6rem);
  --fs-800: clamp(2.3rem, 1.7rem + 2.3vw, 3.7rem);
  --fs-hero: clamp(2.9rem, 1.9rem + 3.8vw, 5.2rem);
  --fs-stat: clamp(2.8rem, 2rem + 2.8vw, 4.6rem);

  /* Caps utility */
  --caps-ls: .18em;

  /* Space */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 2.75rem; --s8: 3.5rem; --s9: 4.5rem; --s10: 6rem;

  /* Shape */
  --radius: 2px;

  --container: 78rem;
  --header-h: 4.5rem;
}

/* Wide screens: container grows and the percentage root scales type +
   spacing together while respecting user font-size preferences. Nothing
   below 1600px changes. */
@media (min-width: 1600px) {
  :root { --container: 1400px; }
  html { font-size: 106.25%; }
}
@media (min-width: 2000px) {
  :root { --container: 1560px; }
  html { font-size: 112.5%; }
}