/* Brand Tokens — R Brothers Outdoor Services
   Light-surface system calibrated to Apple / SwiftUI hierarchy logic.
   Hierarchy comes from layered surfaces + hairline separators + type weight —
   not from inverted dark-theme contrast tricks.
   --color-accent / --color-accent-hover / --color-gold / --color-gold-hover
   and the --font-headline / --font-body declarations are kept on their own
   lines so scripts/render.py apply-brand can rewrite values from site.json. */

:root {
  /* Layered surfaces — primary is the page canvas.
     Elevated is used for pulled-forward cards.
     Sunken is used for quiet context strips (testimonials, footer). */
  --bg-primary: #FFFFFF;
  --bg-elevated: #FBFAF7;
  --bg-sunken: #F4F2ED;
  --bg-alt: #FBFAF7;
  --bg-card: #FFFFFF;
  --bg-surface: #F4F2ED;

  /* Text hierarchy — warm near-blacks pair better with landscaping greens
     than pure neutrals. Keep contrast honest for body and meta. */
  --text-primary: #17221B;
  --text-secondary: #4D5851;
  --text-muted: #8A928B;
  --text-inverse: #FFFFFF;

  /* Accent — green reads deeper on white; neon green turns cartoonish.
     Reserved for brand marks, service badges, and subtle hover shifts. */
  --color-accent: #2F7A3B;
  --color-accent-hover: #256030;
  --color-accent-soft: rgba(47, 122, 59, 0.08);
  --color-accent-spring: #5F9E49;
  --color-success: #2F7A3B;

  /* Gold — money-action CTA. Deeper amber carries better on white than the
     candy #E8A020; this reads like a trade professional, not a luxury watch. */
  --color-gold: #B8780C;
  --color-gold-hover: #955F08;
  --color-gold-soft: rgba(184, 120, 12, 0.10);

  /* Borders and separators — hairline, not heavy boxes. */
  --color-border: rgba(24, 34, 27, 0.08);
  --color-border-strong: rgba(24, 34, 27, 0.14);
  --color-border-light: rgba(24, 34, 27, 0.06);
  --color-hairline: rgba(24, 34, 27, 0.06);

  /* Seasonal modifier — blue for snow pages / winter callouts. */
  --color-seasonal-winter: #2F6BB0;
  --color-seasonal-winter-soft: rgba(47, 107, 176, 0.08);

  /* Typography — keep single-quoted family strings so render.py can rewrite. */
  --font-headline: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Sizing */
  --max-width: 1140px;
  --max-width-prose: 640px;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Elevation — shadows stay restrained; white-on-white depends on precision. */
  --shadow-hairline: 0 1px 0 rgba(24, 34, 27, 0.04);
  --shadow-sm: 0 1px 2px rgba(24, 34, 27, 0.05), 0 1px 1px rgba(24, 34, 27, 0.03);
  --shadow-md: 0 6px 18px -8px rgba(24, 34, 27, 0.12), 0 2px 4px rgba(24, 34, 27, 0.04);
  --shadow-lg: 0 24px 48px -20px rgba(24, 34, 27, 0.18), 0 6px 10px -4px rgba(24, 34, 27, 0.06);

  /* Motion */
  --transition: 0.18s ease;
  --transition-slow: 0.32s ease;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition: 0s;
    --transition-slow: 0s;
  }
}