/* =====================================================================
   OptiBelly — Brand Design Tokens (LOCKED palette)
   Single source of truth for brand colors. Owned by optibelly-brand-expert.
   Documented in docs/BRAND_GUIDELINES.md. Do not introduce off-palette colors.

   WCAG note: text contrast verified (sRGB). Bright --color-teal is an ACCENT /
   large-element color — it FAILS AA for normal-size text in every label color,
   so solid CTAs use --color-teal-dark (white text passes AA at 5.15:1).
   See "Safe pairings" below and docs/BRAND_GUIDELINES.md.
   ===================================================================== */

:root {
  /* ---- Core palette (approved) ---- */
  --color-navy:     #163A5F; /* primary · headers · trust */
  --color-teal:     #2AA198; /* primary action / CTA / accent (see contrast note) */
  --color-mint:     #DFF5F2; /* light surfaces / section backgrounds */
  --color-white:    #FFFFFF; /* base background */
  --color-charcoal: #2D3748; /* body text */

  /* ---- Derived for accessibility (AA-safe CTA) ----
     #2AA198 can't carry normal text at AA in any label color. This darkened
     teal keeps the brand hue while passing AA: white text = 5.15:1 (normal),
     and as text on white/mint it also passes AA. Use it for solid buttons. */
  --color-teal-dark: #1F7A70; /* CTA fill (white label) · teal text on light bg */

  /* ---- Semantic aliases (build to these, not raw hex) ---- */
  --color-bg:            var(--color-white);
  --color-bg-alt:        var(--color-mint);   /* section backgrounds */
  --color-text:          var(--color-charcoal);
  --color-heading:       var(--color-navy);
  --color-accent:        var(--color-teal);      /* accents/highlights at large sizes */
  --color-cta-bg:        var(--color-teal-dark); /* AA-safe solid button */
  --color-cta-text:      var(--color-white);
  --color-cta-bg-hover:  var(--color-navy);      /* hover/active — white text 11.6:1 */
  --color-link:          var(--color-teal-dark); /* AA on white/mint */
  --color-on-navy:       var(--color-white);     /* 11.6:1 */
  --color-on-mint:       var(--color-charcoal);  /* 10.6:1 (navy also OK, 10.2:1) */
}

/* =====================================================================
   SAFE PAIRINGS (do / don't) — keep all body text at AA (4.5:1+)
   ---------------------------------------------------------------------
   ✅ charcoal text on white            (12.0:1)
   ✅ charcoal or navy text on mint     (10.6:1 / 10.2:1)
   ✅ white text on navy                (11.6:1)
   ✅ white text on --color-teal-dark   (5.15:1)  ← solid CTA
   ✅ --color-teal-dark text on white/mint (5.15:1 / ~4.8:1)  ← links

   ⚠️ bright --color-teal: LARGE text / non-text accents ONLY
      ✗ white on teal      3.16:1  — fails AA normal (large-only)
      ✗ charcoal on teal   3.80:1  — fails AA normal (large-only)
      ✗ navy on teal       3.69:1  — fails AA normal (large-only)
   → For any teal button with normal-size text, use --color-cta-bg (teal-dark)
     or put a navy/charcoal label only at large/bold sizes. Never white-on-bright-teal
     for body or small button text.
   ===================================================================== */

/* Example button utilities (illustrative — wire into the theme as needed) */
.ob-btn {
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
  border: 0;
}
.ob-btn:hover,
.ob-btn:focus { background: var(--color-cta-bg-hover); } /* navy, white text */

.ob-section--alt { background: var(--color-bg-alt); color: var(--color-on-mint); }
.ob-section--navy { background: var(--color-navy); color: var(--color-on-navy); }