/* 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:#00bf63;      /* brand primary — bright accent: focus rings, mic, glow, highlights */
  --green-cta:#008f50;  /* actionable fill (buttons + header) — white text legible on it (≈4.2:1) */
  --green-d:#00713f;    /* button hover / active (deeper) */
  --green-ink:#067a47;  /* green used as TEXT on light bg — dark enough to read (≈5.4:1) */
  --deep:#04553f;       /* darkest green for strong text accents on light bg */
  --green-l:#3fd587;    /* dots/badges, lighter tint */
  --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.
   Every interactive button gets a subtle breathe + a clear press/tap response. */
button, .btnlink {
  font-family: var(--display); font-weight: 700;
  background: var(--green-cta); color: #fff; border: 0;
  border-radius: 999px; padding: 13px 26px; cursor: pointer; font-size: 16px;
  transition: background .15s ease, transform .09s ease, box-shadow .2s ease;
}
button:hover, .btnlink:hover { background: var(--green-d); }
button:active, .btnlink:active { transform: scale(.96); }            /* press registers immediately */

/* Subtle "breathe" on all action buttons (utility buttons opt out below). */
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,191,99,0); }
  50%      { box-shadow: 0 0 0 6px rgba(0,191,99,.14); }
}
@keyframes tap {                                                     /* one-shot click confirm */
  0%   { box-shadow: 0 0 0 0 rgba(0,191,99,.5); }
  100% { box-shadow: 0 0 0 16px rgba(0,191,99,0); }
}
@media (prefers-reduced-motion: no-preference) {
  button { animation: breathe 3.4s ease-in-out infinite; }
  button.tapped { animation: tap .42s ease-out; }
}
/* Utility / secondary buttons stay calm — no breathe. */
.usmall, .sec, .pweye, .link, .profilebtn, .profiledrop button,
.authtab, #adminBack, .backbtn, .iconbtn { animation: none !important; }

/* 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; }