/* Molehill: flat print on paper. Every colour, font, radius, line and easing is a token; base.css and site.css only
   read them. The palette and its budget are in DESIGN.md: paper 70, ink and loam 20, soil 6, nose pink 3, states 1.
   Nose pink means one thing: the mole (the hill that popped, the mole's nose) and the one main action. */
@font-face { font-family: 'Bricolage Grotesque'; src: url(/fonts/bricolage-800.woff2) format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url(/fonts/figtree-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url(/fonts/figtree-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url(/fonts/figtree-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url(/fonts/jetbrains-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url(/fonts/jetbrains-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light;

  /* paper, then the strata as the page digs down */
  --bg: #F3EAD9;
  --bg-2: #E8DBC3;
  --surface: #EBDFC9;
  --surface-2: #E1D1B4;
  --soil: #C9A57E;
  --soil-dark: #94683F;
  --loam: #3A2A20;

  /* ink lines: print, not glass */
  --line: rgba(43, 30, 22, 0.12);
  --line-2: rgba(43, 30, 22, 0.24);
  --line-3: rgba(43, 30, 22, 0.55);

  --ink: #2B1E16;
  --ink-2: #5A4A3D;
  --muted: #6F5F51;

  --accent: #F2557A;
  --accent-ink: #B8284F;
  --on-accent: #2B1E16;

  --good: #3F7A3A;
  --bad: #B3261E;
  --warn: #9A5B00;

  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-text: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --display-weight: 800;
  --display-tracking: -0.035em;

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --r-pill: 999px;
  --stroke: 1.5px;
  --border: var(--stroke) solid var(--line-2);
  --border-ink: var(--stroke) solid var(--ink);
  /* the one shadow: a hard offset in soil, like a card sitting on a table */
  --shadow: 3px 3px 0 var(--soil);
  --shadow-ink: 0 3px 0 var(--ink);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-pop: cubic-bezier(0.3, 1.5, 0.5, 1);
  --t-fast: 120ms;
  --t: 260ms;

  --wrap: 1220px;
  --gut: clamp(16px, 4vw, 40px);
  --top-h: 66px;
}