/* OAKKTREEUNII brand tokens — single source of truth for the look & feel.
   Mirrors brand-reference.html. Change brand values here, not in styles.css. */
:root {
  --green:#006B4F;      /* primary: CTAs, buttons, links, accents */
  --deep:#004E3A;       /* button hover, deep accents */
  --green-l:#0a8f6a;    /* dots/badges, gradient top */
  --gold:#C9A227;       /* keyword highlight text/labels */
  --gold-s:#F7EFCF;     /* soft-gold marker behind a word, icon tiles */
  --mint:#C1FFB3;       /* secondary highlight, stat cards */
  --mint-s:#E9FBE3;     /* callout / answer-box backgrounds */
  --ink:#0B0B0B;        /* headings & primary text */
  --mut:#5B6B63;        /* secondary text, sub-labels */
  --body:#3a3f44;       /* long-form paragraph text */
  --line:#E7ECE9;       /* hairline borders, dividers */
  --surf:#FAFAFA;       /* card / page surface */
  --display:'Bricolage Grotesque', sans-serif;
  --sans:'Plus Jakarta Sans', sans-serif;
}

body { font-family: var(--sans); color: var(--ink); }
h1, h2, h3, h4, h5, h6 { font-family: var(--display); font-weight: 800; color: var(--ink); }
h3, h4, h5, h6 { font-weight: 700; }

/* Brand button: fully-rounded green pill, white Bricolage-700 label */
button, .btnlink {
  font-family: var(--display); font-weight: 700;
  background: var(--green); color: #fff; border: 0;
  border-radius: 999px; padding: 13px 28px; cursor: pointer; font-size: 16px;
}
button:hover, .btnlink:hover { background: var(--deep); }

/* Eyebrow label */
.eyebrow {
  display:inline-block; background: var(--mint-s); color: var(--deep);
  font-family: var(--sans); font-weight: 700; font-size: 12px;
  letter-spacing:.08em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px;
}

/* Keyword highlights */
.gold { color: var(--gold); font-weight: 700; }
.mark { background: var(--gold-s); padding: 0 5px; border-radius: 4px; }