/* =============================================================================
   1-tokens.css — Global variables (colours, fonts, type scale, weights)
   Dark mode maps --palette-dark-* surfaces in 13-theme.css; use --color-* in styles.
   ============================================================================= */

/* ---------- Default (mobile-first) ---------- */

:root {
  /* Raw palette — hex sources only; theme file adjusts these for dark mode */
  --palette-primary: #2f6849;
  --palette-primary-dark: #142e22;
  --palette-primary-light: #5dae7a;
  --palette-accent: #3b9b6a;
  --palette-accent-warm: #9ad9b8;
  --palette-bg: #f7faf8;
  --palette-bg-alt: #ecf3ee;
  --palette-text: #1a2b24;
  --palette-text-muted: #5c6f66;
  --palette-white: #ffffff;
  --palette-border: #d0ddd6;
  --palette-panel: #ffffff;
  --palette-input: #ffffff;
  --palette-cta-bg: #ffffff;
  --palette-cta-text: #142e22;

  /* Dark mode canvas — warm grey-brown; mapped in 13-theme.css (not green-tinted) */
  --palette-dark-bg: #141312;
  --palette-dark-panel: #1c1a18;
  --palette-dark-bg-alt: #242120;
  --palette-dark-input: #242120;
  --palette-dark-border: #35302c;
  --palette-dark-text: #e8e4df;
  --palette-dark-text-muted: #9c9590;

  /* Greens — section panels, header/footer bar, process circles */
  --color-primary: var(--palette-primary);
  --color-primary-dark: var(--palette-primary-dark);
  --color-primary-light: var(--palette-primary-light);

  /* Mint highlights — nav hover, service icons, link accents */
  --color-accent: var(--palette-accent);
  --color-accent-warm: var(--palette-accent-warm);

  /* Page chrome — body bg, white curved panels, body copy, form fields */
  --color-bg: var(--palette-bg);
  --color-bg-alt: var(--palette-bg-alt);
  --color-text: var(--palette-text);
  --color-text-muted: var(--palette-text-muted);
  --color-white: var(--palette-white);
  --color-border: var(--palette-border);
  --color-panel: var(--palette-panel);
  --color-input: var(--palette-input);

  /* Pill buttons — white fill on green sections, dark label text */
  --color-cta-bg: var(--palette-cta-bg);
  --color-cta-text: var(--palette-cta-text);

  /* Typefaces — Nunito body/UI; Libre Baskerville section titles */
  --font-body: 'Nunito Sans', sans-serif;
  --font-heading: 'Libre Baskerville', serif;

  /* Type scale (phone) — home headline, h2 titles, cards, nav, small print */
  --text-display: 2.5rem;
  --text-h1: 1.75rem;
  --text-h2: 1.25rem;
  --text-h3: 1rem;
  --text-body: 0.938rem;
  --text-small: 0.813rem;

  /* Weights — body, buttons/nav labels, occasional bold */
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Fixed header sits above section content when scrolling */
  --z-fixed: 100;
}

/* ---------- Responsive — type scale from 1024px up ---------- */

@media (min-width: 1024px) {
  :root {
    --text-display: 4rem;
    --text-h1: 2.25rem;
    --text-h2: 1.5rem;
    --text-h3: 1.125rem;
    --text-body: 1rem;
    --text-small: 0.875rem;
  }
}