/* =============================================================================
   Marketing site design tokens
   =============================================================================
   The only place a colour is chosen. The site matches the old WordPress theme
   (marketing-site.md MS-4), so these are that theme's colours, measured from the
   live site on 2026-10-26: charcoal text, DogWatch green, forest-green footer and
   the bright DogWatch orange.

   One deliberate change: orange buttons use the darkened orange (#b54708), at the
   owner's choice (2026-10-26). White on it is 5.2:1 and clears WCAG AA; white on
   the old bright orange was 2.6:1. The bright orange stays for the Special Offer
   band behind white text, as the old site had it. White on the green is 3.4:1.
   ========================================================================== */

:root {
  --green-900: #1f3d00;
  --green-800: #2b5200;
  --green-700: #336200;
  --green-600: #44800a;
  --green-500: #55980c;
  --green-100: #e6f1d8;
  --green-050: #f4f9ee;

  --orange-700: #b54708;
  --orange-600: #c4520c;
  --orange-100: #fdebdc;

  --ink-900: #4d4b4e;
  --ink-700: #4d4b4e;
  --ink-500: #5f676d;
  --ink-200: #d7dbde;
  --ink-100: #eceef0;
  --paper: #ffffff;
  --paper-warm: #f7f6f1;

  /* The old site's section backgrounds, by the names its theme used (bg-color--tan, ...).
     All exactly as the old theme had them. */
  --bg-tan: #ecebe0;
  --bg-tan-new: #f7f7f3;
  --bg-light-grey: #f4f5f5;
  --bg-eggshell: #f7f7f2;
  --bg-fog: #f0f1f1;
  --bg-green: #55980c;
  --bg-forest-green: #336200;
  --bg-forest-green-dark: #1f4a05;
  --bg-pumpkin-orange: #ff7800;
  --bg-lime: #8fbf2e;
  --bg-grey: #4d4b4e;

  /* The online store keeps the Square Online store's look (online-store.md ST-1): a pale sage
     page, a leaf-green pill button and a deep green heading, all from DogWatch's green family.
     White on --store-green is 4.6:1, and --store-heading on --store-bg is 7.3:1. */
  --store-bg: #f2f5ef;
  --store-green: #558632;
  --store-green-hover: #3f6a22;
  --store-heading: #3a631c;
  --store-font: "Work Sans", var(--font);

  /* The old theme: text, links and buttons. */
  --wp-ink: #4d4b4e;
  --wp-green: #55980c;
  --wp-green-hover: #46800a;
  --wp-forest: #336200;
  --wp-orange: #ff7800;
  --wp-orange-hover: #e56b00;
  --wp-topbar: #f0f1f1;
  --font-slab: "Roboto Slab", Georgia, serif;

  --brand: var(--wp-green);
  --brand-strong: var(--green-900);
  --brand-soft: var(--green-050);
  --accent: var(--orange-700);
  --accent-hover: #933a06;
  --text: var(--wp-ink);
  --text-muted: var(--ink-500);
  --border: var(--ink-200);
  --surface: var(--paper);
  --surface-alt: var(--paper-warm);

  --font: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 10px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 4px 16px rgb(0 0 0 / 0.06);
  --wrap: 1246px;
  --gutter: 16px;
}