/* ==========================================================================
   DoneNow design tokens — SINGLE SOURCE OF TRUTH.

   v1.3.0 declared these twice, in final.css and location.css, and the two had
   already drifted: --shell was 1160px on the homepage and 1100px on locality
   pages. Both files now import this one instead.

   Do not redeclare any token below in another stylesheet.
   ========================================================================== */

:root {
  /* ---- Brand colour ---------------------------------------------------- */
  --ink: #111111;
  --ink-2: #1a1a18;
  --yellow: #ffc107;
  --yellow-deep: #e9ac00;
  --yellow-soft: #fff4d1;
  --cream: #f6f4ef;
  --cream-2: #fbfaf7;
  --line: #e4e0d6;
  --line-2: #d6d1c4;
  --green: #22c55e;
  --red: #c4321f;
  --white: #ffffff;

  /* Body text. Darkened from #6B6B64 to clear 4.5:1 on cream as well as white. */
  --muted: #5c5b54;
  /* Muted text on the dark ink surfaces. */
  --muted-invert: #d9d7d0;
  /* Eyebrow labels: previously too light to read. */
  --label: #6f6e66;
  --label-invert: #b9b6ac;

  /* ---- Layout ---------------------------------------------------------- */
  --shell: 1200px;
  --gutter: 24px;

  /* Readable measures. Body copy stays under ~80 characters. */
  --measure: 68ch;
  --measure-tight: 54ch;
  --measure-faq: 820px;

  /* ---- Spacing scale --------------------------------------------------- */
  /* Fixed steps. Never invent an intermediate value. */
  --s-1: 24px;
  --s-2: 40px;
  --s-3: 64px;
  --s-4: 88px;

  /* Section rhythm: --s-4 on desktop, --s-3 below 800px. Replaces the old
     84px/64px pair, so proportions are preserved. */
  --section-y: var(--s-4);

  /* ---- Radius ---------------------------------------------------------- */
  --r-s: 8px;
  --r-m: 14px;
  --r-l: 20px;

  /* ---- Type ------------------------------------------------------------ */
  --display: 'Outfit', system-ui, sans-serif;
  --body: 'DM Sans', system-ui, sans-serif;
}

@media (max-width: 800px) {
  :root {
    --section-y: var(--s-3);
    --gutter: 20px;
  }
}