/* ===========================================================
   TasteBud — Color System
   "Green always outweighs orange. Orange always outweighs blue."
   Green = the brand is talking. Orange = energy/newness.
   Blue = a person talking (community). Ink = the anchor.
   Butter = warmth. Stone = utility. Paper = the canvas.
   =========================================================== */

:root {
  /* ---- Brand base palette (raw values from the brief) ---- */
  --ink:          #1A1A1A;  /* the anchor — headlines, dark grounds */
  --ink-soft:     #2A2A2A;
  --green:        #12A036;  /* THE BRAND — hero, CTAs, brand moments */
  --green-deep:   #0E8A2C;  /* hover / pressed green */
  --green-dark:   #0A6E22;  /* deepest green, on-dark accents */
  --orange:       #FF6B00;  /* the energy — newness, launches, drops */
  --blue:         #0070E0;  /* the community — people, testimonials, UGC */
  --butter:       #F2E5C0;  /* warmth — backgrounds, product cards */
  --butter-soft:  #F8EED2;
  --white:        #FFFFFF;  /* clean space */
  --stone:        #E8E2D8;  /* utility — borders, dividers */
  --stone-light:  #F0EADC;
  --paper:        #FAF6EB;  /* the canvas — default page ground */
  --paper-warm:   #F5EFDF;
  --muted:        #6B6B6B;  /* secondary text */

  /* ---- Semantic aliases ---- */
  /* Text */
  --text-strong:    var(--ink);
  --text-body:      var(--ink);
  --text-muted:     var(--muted);
  --text-on-dark:   var(--paper);
  --text-brand:     var(--green);
  --text-link:      var(--green);

  /* Surfaces */
  --surface-page:    var(--paper);
  --surface-warm:    var(--paper-warm);
  --surface-card:    var(--white);
  --surface-sunken:  var(--butter);
  --surface-inverse: var(--ink);

  /* Lines */
  --border-subtle:   var(--stone);
  --border-strong:   var(--ink);
  --divider:         var(--stone);

  /* Roles — use these for intent, not raw hues */
  --role-brand:      var(--green);
  --role-brand-press:var(--green-deep);
  --role-energy:     var(--orange);   /* "new" / announcements */
  --role-community:  var(--blue);     /* a person talking */

  /* Focus */
  --focus-ring:      var(--green);
}