/* ============================================================
   The Better Whisk — Color Tokens
   Warm, editorial, heritage-luxury palette: cream paper grounds,
   espresso ink, brass/gold accents, and a soft dusty-rose for
   warmth and femininity. Sampled from the brand site.
   ============================================================ */

:root {
  /* ---- Warm neutrals (paper & ink) ---- */
  --cream-50:   #FCF8F3;  /* page background */
  --cream-100:  #F8F1E9;  /* alt section / wash */
  --cream-150:  #F3EADF;  /* soft card / input field */
  --cream-200:  #EBDFD1;  /* subtle borders / dividers */
  --cream-300:  #DECBB8;  /* stronger hairline */

  --espresso-900: #2A1D16; /* headings, near-black ink */
  --espresso-800: #3A291F;
  --espresso-700: #4A3729; /* strong body */
  --cocoa-600:    #6E5B4E; /* body copy */
  --cocoa-500:    #897565; /* secondary text */
  --taupe-400:    #A1907F; /* muted labels / eyebrows */
  --taupe-300:    #BCAE9E; /* placeholder / disabled */

  --white:       #FFFFFF;
  --warm-white:  #FFFDFB;  /* card surface */

  /* ---- Brass / Gold (primary accent) ---- */
  --gold-700: #8F6E25;  /* pressed / text on light */
  --gold-600: #A9842F;
  --gold-500: #C19A3E;  /* dividers, outlines, key accent */
  --gold-400: #D2B264;
  --gold-300: #E3CD96;
  --gold-200: #F0E2C2;  /* tint wash */
  --gold-100: #F8F0DD;

  /* ---- Dusty Rose (warmth / feminine accent) ---- */
  --rose-700: #9E5563;
  --rose-600: #BC6E7C;
  --rose-500: #C77E8A;  /* italic accents, rose ink */
  --rose-400: #DCA0AC;
  --rose-300: #E9C3CC;  /* filled button / soft */
  --rose-200: #F4DDE3;  /* badges */
  --rose-100: #FBEFF1;  /* blush card wash */
  --rose-50:  #FDF6F7;

  /* ---- Botanical greens (illustration support, rare) ---- */
  --sage-500: #8C9A6E;
  --sage-300: #C2CBA9;

  /* ---- Semantic: surfaces ---- */
  --surface-page:        var(--cream-50);
  --surface-page-alt:    var(--cream-100);
  --surface-card:        var(--warm-white);
  --surface-card-blush:  var(--rose-100);
  --surface-field:       var(--cream-150);
  --surface-ink:         var(--espresso-900);
  --surface-gold-wash:   var(--gold-100);

  /* ---- Semantic: text ---- */
  --text-heading:  var(--espresso-900);
  --text-body:     var(--cocoa-600);
  --text-strong:   var(--espresso-700);
  --text-muted:    var(--taupe-400);
  --text-accent:   var(--rose-500);
  --text-gold:     var(--gold-600);
  --text-on-ink:   var(--cream-50);
  --text-on-rose:  var(--espresso-900);

  /* ---- Semantic: lines & accents ---- */
  --border-subtle:  var(--cream-200);
  --border-strong:  var(--cream-300);
  --border-gold:    var(--gold-500);
  --border-field:   var(--cream-300);
  --divider-gold:   var(--gold-500);
  --focus-ring:     var(--gold-400);

  /* ---- Semantic: interactive ---- */
  --accent:            var(--gold-500);
  --accent-hover:      var(--gold-600);
  --accent-press:      var(--gold-700);
  --accent-soft:       var(--rose-300);
  --accent-soft-hover: var(--rose-400);
}