:root {
  /* ── Colors ───────────────────────────────────────────────────────────────
   * YardWorks brand system: deep fresh green + vibrant orange on warm cream.
   * Use these canonical names in all theme CSS and block templates.
   * Non-canonical namespaces (--colors-*, --brand-*, --custom-*) are
   * forbidden by design governance and will fail validation.
   * ────────────────────────────────────────────────────────────────────── */
  --color-primary:      #0D6B3B; /* deep fresh green */
  --color-primary-dark: #0A4B2A; /* deep forest green */
  --color-secondary:    #1E8A4E; /* vibrant leaf green */
  --color-accent:       #F97316; /* vibrant brand orange */
  --color-accent-dark:  #EA580C; /* pressed orange */
  --color-surface:      #FFFFFF;
  --color-surface-alt:  #FBF8F2; /* warm cream */
  --color-surface-tint: #F3F8F2; /* light green tint */
  --color-text:         #18271E; /* deep green-black */
  --color-text-muted:   #5B6B60; /* muted sage */
  --color-text-on-dark: #FFFFFF;
  --color-border:       #E8E3D8; /* soft stone border */

  /* ── Typography ──────────────────────────────────────────────────────────
   * Canonical family tokens: --font-display, --font-body, --font-mono.
   * Self-hosted (see @font-face in assets/css/main.css). No CDN.
   * Canonical scale tokens:  --text-xs … --text-hero.
   * ────────────────────────────────────────────────────────────────────── */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', 'DM Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-hero: clamp(2.75rem, 4.5vw + 1rem, 4.5rem);

  /* ── Spacing ─────────────────────────────────────────────────────────────
   * Canonical tokens: --space-xs … --space-section.
   * ────────────────────────────────────────────────────────────────────── */
  --space-xs:      0.5rem;
  --space-sm:      1rem;
  --space-md:      1.5rem;
  --space-lg:      2rem;
  --space-xl:      3rem;
  --space-2xl:     4rem;
  --space-section: clamp(2.75rem, 4vw, 4.75rem);

  /* ── Border radius ───────────────────────────────────────────────────────
   * Canonical tokens: --radius-sm, --radius-md, --radius-lg, --radius-pill.
   * ────────────────────────────────────────────────────────────────────── */
  --radius-sm:   10px;
  --radius-md:   18px;
  --radius-lg:   28px;
  --radius-pill: 9999px;

  /* ── Shadows (warm, soft, premium) ───────────────────────────────────────*/
  --shadow-card:       0 8px 30px rgba(24, 39, 30, 0.08);
  --shadow-card-hover: 0 22px 60px rgba(13, 107, 59, 0.18);
  --shadow-hero:       0 40px 90px rgba(10, 75, 42, 0.28);
  --shadow-soft:       0 18px 50px rgba(24, 39, 30, 0.10);

  /* ── Animation variables ─────────────────────────────────────────────────*/
  --animation-blob-speed:        18s;
  --animation-scroll-parallax:   0.3;
}