/* Design tokens from the live site's Customizer CSS (2026 capture), _discovery/08_phase1_plan.md §1.3.
   Contrast (WCAG 2.1 AA) adjustments are marked; the brand colour itself is unchanged. */
:root {
  /* Brand */
  --color-brand: #f7961d;           /* live primary: buttons, services box, sidebar form, accents */
  --color-brand-hover: #484848;     /* live hover */
  /* AA: #f7961d is only 2.25:1 on white, so text needs darker shades of the same hue */
  --color-brand-text: #aa6106;      /* links / small text on white or #f9f9f9 (4.75:1 / 4.51:1) */
  --color-brand-text-large: #d67a08;/* large headings (>= 24px) on white or #f9f9f9 (3.16:1 / 3.0:1) */
  --color-on-brand: #2f2929;        /* text on orange (6.35:1); white on orange is only 2.25:1 */

  /* Neutrals */
  --color-text: #484848;            /* body text (9.15:1 on white) */
  --color-heading: #484848;
  --color-muted: #737373;           /* AA: live #919191 is 3.15:1; used for meta text */
  --color-muted-decorative: #919191;/* live grey, for icons/borders only */
  --color-bg: #ffffff;
  --color-bg-alt: #f9f9f9;          /* alternate sections, page title band */
  --color-border: #e1e1e1;
  --color-dark: #2f2929;            /* footer */
  --color-on-dark: #ffffff;         /* 14.29:1 on #2f2929 */
  --color-success: #2e7d32;
  --color-success-bg: #e8f5e9;
  --color-error: #b3261e;
  --color-error-bg: #fdecea;
  --color-focus: #2f2929;

  /* Type */
  --font-heading: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-body: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-size-base: 1.0625rem;      /* 17px */
  --font-size-small: 0.9375rem;
  --font-size-h1: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --font-size-h2: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --font-size-h3: 1.25rem;

  /* Layout. Breakpoints (media queries can't use variables): 480, 740, 900 (main desktop switch), 1200 */
  --container-max: 1200px;
  --gutter: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --radius: 4px;
  --radius-card: 8px;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 6px 20px rgba(0, 0, 0, 0.12);
}