/* Citrus Aesthetics — brand tokens.
   Sourced from citrusmedspasandiego.com computed styles (2026-05-17):
   primary green rgb(124,171,85), deep green rgb(52,100,23),
   lemon rgb(255,191,17), soft taupe rgb(184,172,172), white bg, Montserrat headings.
   This is HER brand (patient-facing), not the IteraUX palette. */

:root {
  /* Surfaces */
  --c-bg:        #ffffff;   /* her site background */
  --c-surface:   #fbf7ef;   /* warm cream for cards/sections (premium, not stark) */
  --c-line:      #ece6da;   /* hairline borders */

  /* Ink */
  --c-ink:       #1a1a1a;   /* body text (near-black) */
  --c-muted:     #8a8580;   /* secondary text (darkened from her #b8acac for AA) */

  /* Brand */
  --c-primary:      #7cab55; /* citrus green — accents, labels, focus */
  --c-primary-deep: #346417; /* deep green — emphasis, CTA hover */
  --c-accent:       #ffbf11; /* lemon — primary CTA fill (high-contrast, on-brand) */
  --c-accent-ink:   #1a1a1a; /* text on the lemon CTA (black = strong contrast) */

  /* Type */
  --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --fw-display: 700;
  --fw-body: 400;
  --fw-medium: 600;

  /* Scale */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --radius-s: 8px; --radius-m: 14px; --radius-l: 22px;
  --maxw: 540px;                      /* mobile-first content column */
  --shadow-card: 0 1px 2px rgba(26,26,26,.04), 0 8px 24px rgba(52,100,23,.06);
  --shadow-cta:  0 6px 18px rgba(255,191,17,.35);
  --tap: 48px;                        /* min touch target */
}