/* ------------------------------------------------------------------
   Design tokens. This is the file to change if you want a different look.
   Every color, font, and size on the site comes from here.
   ------------------------------------------------------------------ */
:root {
  /* Color */
  --moss: #254118;        /* primary: team green */
  --moss-deep: #182a0f;   /* hover and pressed states on moss */
  --black: #000000;       /* secondary */
  --fog: #eef1ea;         /* light sections */
  --fog-2: #dde4d6;       /* alternate light sections */
  --leaf: #24a21b;        /* accent on dark backgrounds */
  --ember: #e8a33d;       /* the spark: the hero sigil and the preview badge, nothing else */

  --text: #2a2e27;        /* body text on light */
  --text-soft: #4f574a;   /* secondary text on light */
  --on-dark: #eef1ea;     /* body text on moss or black */
  --on-dark-soft: #b9c4b1;

  /* Type */
  --font-display: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --font-body: "Source Sans 3", Calibri, "Segoe UI", system-ui, sans-serif;

  --step--1: 0.9375rem;
  --step-0: 1.125rem;
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --display-xl: clamp(3.5rem, 2rem + 6vw, 7.25rem);
  --display-l: clamp(2.9rem, 1.9rem + 4vw, 5.25rem);
  --display-m: clamp(2.1rem, 1.7rem + 1.6vw, 3rem);
  --display-s: clamp(1.7rem, 1.5rem + 0.8vw, 2.2rem);

  /* Space and shape */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --page: 1180px;
  --measure: 62ch;
  --band: clamp(4rem, 8vw, 7.5rem);
  --leaf-radius: 0 16px 0 16px;  /* the one corner shape the site uses */
  --teeth: 40px;                 /* width of one gear tooth pair */
}