/* ============================================================
   WCGB · Color Tokens
   Source of truth: WCGB Figma Starter v2.1 + Brand Guide v2.1
   Hierarchy: Napa Blue leads · Vintage Tan supports · Sonoma Grape accents.
   Border radius is 0 throughout — the brand is architectural, not rounded.
   ============================================================ */

:root {
  /* ---- Brand palette (evergreen) ---- */
  --napa-blue:      #372D88;  /* PMS Violet C · primary, dominant */
  --napa-blue-deep: #2A2270;  /* hover state for Napa surfaces */
  --napa-blue-press:#1E1860;  /* pressed / active state */
  --sonoma-grape:   #9F2064;  /* PMS 235 C · accent only, one point per composition */
  --vine-green:     #999D49;  /* PMS 384 C · positive / do / section kickers */
  --grey-poupon:    #C51F31;  /* PMS 186 C · promo / sale / urgency ONLY */
  --hillside-earth: #54442F;  /* PMS 448 C · warm neutral, earthy accents */
  --catalog-gold:   #B8821A;  /* catalog "gold copy" script headlines */

  /* ---- Neutrals ---- */
  --ink:          #1A1625;  /* primary text, dark surfaces, nav — not pure black */
  --white:        #FFFFFF;
  --vintage-tan:  #EFE6DB;  /* background wash, cards, image placeholders */
  --mist:         #F5F1EC;  /* lightest background, quiet sections */

  /* ---- Text ramp ---- */
  --text-primary:   #1A1625;  /* headlines, strong text */
  --text-body:      #3D3650;  /* body prose on light */
  --text-muted:     #6B6480;  /* secondary body, captions, helper */
  --text-faint:     #9A93AE;  /* metadata, mono labels, swatch values */
  --text-on-dark:        rgba(255,255,255,0.92);
  --text-on-dark-muted:  rgba(255,255,255,0.55);
  --text-on-dark-faint:  rgba(255,255,255,0.30);

  /* ---- Lines & washes ---- */
  --rule:           rgba(55,45,136,0.12);  /* hairline dividers, card borders */
  --rule-strong:    rgba(55,45,136,0.24);
  --rule-on-dark:   rgba(255,255,255,0.08);
  --grape-wash:     rgba(159,32,100,0.08);  /* occasion tag / banned-word bg */
  --grape-wash-line:rgba(159,32,100,0.20);
  --napa-wash:      rgba(55,45,136,0.06);   /* secondary button hover, segment tag */
  --tint-do:        #F5F8F0;  /* "right"/do example wash (vine) */
  --tint-dont:      #FBF5F5;  /* "wrong"/don't example wash (grape) */

  /* ---- Semantic surfaces ---- */
  --surface-page:        #FFFFFF;
  --surface-alt:         var(--mist);        /* alternating sections */
  --surface-card:        #FFFFFF;
  --surface-card-soft:   var(--vintage-tan); /* image placeholders, soft cards */
  --surface-dark:        var(--ink);
  --surface-brand:       var(--napa-blue);   /* statements, hero fields, CTAs */
  --surface-image-ph:    var(--vintage-tan);

  /* ---- Semantic intent ---- */
  --intent-primary:   var(--napa-blue);
  --intent-accent:    var(--sonoma-grape);
  --intent-positive:  var(--vine-green);
  --intent-promo:     var(--grey-poupon);
  --intent-earth:     var(--hillside-earth);

  /* ---- Focus ---- */
  --focus-ring: rgba(55,45,136,0.45);
}