:root {
  /* ---- Core brand palette (sampled from TheSylvesterBrandBook.pdf) ---- */
  --green-forest: #244122;   /* primary brand green, dominant surface */
  --green-deep: #1a3018;     /* darker step for pressed states / footers */
  --green-olive: #36411f;    /* badge fill, warm dark green */
  --green-moss: #5a6d53;     /* muted mid green, secondary text on cream */
  --green-sage: #9fae61;     /* olive sparkle accent */
  --green-mint: #c8dda7;     /* light green, lasso + badge fill */

  --cream-blush: #fcf1ea;    /* primary page cream (pink cast) */
  --cream-ivory: #fbf4e1;    /* warm ivory, alt page cream */
  --cream-peach: #feedde;    /* peach-tinted cream, tint surface */

  --coral: #ff905f;          /* signature coral, secondary logo colour */
  --orange: #fd7234;         /* hot orange, callouts + links */
  --peach: #ffac9a;          /* soft peach sparkle */
  --pink: #ff6c80;           /* hot pink sparkle / accent */
  --aqua: #92dbd4;           /* turquoise, wordmark colour */
  --aqua-deep: #6cc4bc;      /* darker aqua for hover on aqua */
  --yellow: #f2db48;         /* lasso yellow */
  --yellow-warm: #ffc93f;    /* warm gold sparkle */
  --ink: #0c0d0c;            /* near-black */
  --white: #ffffff;

  /* ---- Semantic aliases ---- */
  --surface-page: var(--cream-ivory);
  --surface-card: var(--cream-blush);
  --surface-tint: var(--cream-peach);
  --surface-inverse: var(--green-forest);
  --surface-inverse-deep: var(--green-deep);
  --surface-accent: var(--coral);
  --surface-cool: var(--aqua);

  --text-heading: var(--green-forest);
  --text-body: var(--ink);
  --text-muted: var(--green-moss);
  --text-accent: var(--orange);
  --text-on-inverse: var(--cream-ivory);
  --text-on-inverse-muted: var(--green-mint);
  --text-on-accent: var(--green-forest);

  --border-hairline: color-mix(in srgb, var(--green-forest) 22%, transparent);
  --border-strong: var(--green-forest);
  --border-on-inverse: color-mix(in srgb, var(--green-mint) 45%, transparent);

  --link: var(--orange);
  --link-hover: var(--green-forest);

  --focus-ring: var(--aqua);
  --state-success: var(--green-sage);
  --state-warning: var(--yellow-warm);
  --state-danger: var(--pink);
}