/*
  Design tokens: the only place colors and fonts are defined.
  Source: stages/05-experience/output/design-direction.md (Plain Spoken, chosen 2026-10-17).
*/

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colors */
  --color-text: #1C1C1C;
  --color-background: #FFFFFF;
  --color-primary: #0B5D3B;
  --color-accent: #F2C14E; /* highlight background only; text on it stays --color-text */
  --color-muted: #595959;
  --color-on-primary: var(--color-background);

  /* Fonts */
  --font-heading: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Type scale: ratio 1.25 from a 17px base (18px on desktop) */
  --text-base: 1.0625rem;
  --ratio: 1.25;
  --step--1: calc(var(--text-base) / var(--ratio));
  --step-0: var(--text-base);
  --step-1: calc(var(--step-0) * var(--ratio));
  --step-2: calc(var(--step-1) * var(--ratio));
  --step-3: calc(var(--step-2) * var(--ratio));
  --step-4: calc(var(--step-3) * var(--ratio));
  --step-5: calc(var(--step-4) * var(--ratio));

  --leading-body: 1.6;
  --leading-heading: 1.15;
}

@media (min-width: 48rem) {
  :root {
    --text-base: 1.125rem;
  }
}