/* ───────────────────────────────────────────────────────────
   Birmingham Men's Health — design tokens
   Portable brand layer: palette, type, spacing, radius.
   Kept separate from site.css so it can be shared across the
   practice's sites. Loaded after Foundation, before site.css.
   ─────────────────────────────────────────────────────────── */

:root {
  /* Core palette */
  --bmh-forest:        #254E42;
  --bmh-forest-2:      #2C5A4D;   /* raised circle / hover */
  --bmh-forest-line:   #3A6455;   /* dividers on forest */
  --bmh-clay:          #C96F44;
  --bmh-clay-ink:      #3D2108;   /* text on clay */
  --bmh-clay-soft:     #E8A97F;   /* clay for use on forest */
  --bmh-clay-text:     #A24E2A;   /* AA-safe clay for small text on light (≈5:1) */
  --bmh-sage:          #8FA99A;
  --bmh-sand:          #F4EFE7;
  --bmh-ink:           #2B1D14;   /* body text (warm chocolate) */
  --bmh-ink-soft:      #6b5b4d;   /* muted body */
  --bmh-ink-on-forest: #C7D6CE;   /* body copy on forest */
  --bmh-ink-on-forest-mute: #9FB5AB;

  /* Icon-badge tints (bg + matching darker ink) */
  --bmh-tint-clay:      #EADFD4;  --bmh-tint-clay-ink:   #A9542F;
  --bmh-tint-forest:    #DEE8E2;  --bmh-tint-forest-ink: #2E5A4B;
  --bmh-tint-sage:      #E2E8DE;  --bmh-tint-sage-ink:   #4F6B4A;

  /* Lines & surfaces */
  --bmh-card:      #ffffff;
  --bmh-card-line: #e4dccf;

  /* Layout — single knob for the content container width.
     100% = full-bleed content (edge-to-edge with responsive gutters).
     Set a rem/px value here (e.g. 1280px) to re-box it later. */
  --bmh-max: 100%;
  --bmh-measure: 62ch;          /* readable cap for long prose lines */

  /* Radius */
  --bmh-radius:    10px;
  --bmh-radius-lg: 14px;
  --bmh-radius-xl: 18px;

  /* Type */
  --bmh-head: 'Hanken Grotesk', system-ui, sans-serif;
  --bmh-body: 'Inter', system-ui, sans-serif;
}