/* ============================================================
   Belvest Family Wealth — Color Tokens
   Anchors provided by brand:
     Brown  PMS 4625      #4C2300  rgb(76,35,0)
     Ink    warm near-black #3B2319 rgb(59,35,25)
     Gray   PMS Cool Gray 11 #626162 rgb(98,97,98)
     Mist   soft blue-gray #D2DDE9  rgb(210,221,233)
   Everything else is derived to harmonize with these anchors.
   ============================================================ */

:root {
  /* ---- Brown (primary brand ramp — espresso / PMS 4625) ---- */
  --brown-50:  #F6EFE8;
  --brown-100: #EADCCE;
  --brown-200: #D6BCA1;
  --brown-300: #BC9670;
  --brown-400: #97663A;
  --brown-500: #6E4014;
  --brown-600: #4C2300;   /* brand primary — PMS 4625 */
  --brown-700: #3F2004;
  --brown-800: #2C1705;
  --brown-900: #1C0F05;

  /* ---- Ink (warm near-black) ----
     ARCHIVED: former text / logo / quote-band brown. The site now unifies on a
     single brown (--brown-600). To restore the "ink" look, point --text-primary
     and --surface-inverse below back to var(--ink). */
  --ink:       #3B2319;   /* rgb(59,35,25) */
  --ink-soft:  #4E362B;

  /* ---- Neutral gray ramp (Cool Gray 11) ---- */
  --gray-50:   #F7F6F6;
  --gray-100:  #EDECEC;
  --gray-200:  #DCDBDB;
  --gray-300:  #C3C2C2;
  --gray-400:  #9A9899;
  --gray-500:  #626162;   /* PMS Cool Gray 11 */
  --gray-600:  #4F4E4F;
  --gray-700:  #3B3A3B;
  --gray-800:  #292829;
  --gray-900:  #191819;

  /* ---- Mist (soft cool blue-gray ramp) ---- */
  --mist-50:   #F5F8FB;
  --mist-100:  #E8EFF5;
  --mist-200:  #D2DDE9;   /* brand base — rgb(210,221,233) */
  --mist-300:  #B2C4D6;
  --mist-400:  #8AA3BC;
  --mist-500:  #62809D;
  --mist-600:  #4A6480;

  /* ---- Paper / warm ivory backgrounds ---- */
  --paper:     #FBF9F6;   /* page background, warm off-white */
  --paper-2:   #F4F0EA;   /* sunken / alt surface */
  --paper-3:   #ECE6DD;   /* deeper alt / hairline fill */
  --white:     #FFFFFF;

  /* ---- Semantic accents (muted to fit the warm palette) ---- */
  --success-500: #55694E;  --success-50: #EEF1EA;
  --warning-500: #A9772F;  --warning-50: #F6EEE1;
  --danger-500:  #A6462F;  --danger-50:  #F6E7E2;
  --info-500:    #4A6785;  --info-50:    #E9EEF4;

  /* =========================================================
     SEMANTIC ALIASES — use these in product code, not raw ramps
     ========================================================= */

  /* Text */
  --text-primary:   var(--brown-600);  /* unified brown (was var(--ink)) */
  --text-secondary: var(--gray-600);
  --text-muted:     var(--gray-500);
  --text-faint:     var(--gray-400);
  --text-on-brand:  var(--paper);
  --text-brand:     var(--brown-600);
  --text-link:      var(--brown-600);
  --text-link-hover:var(--brown-600);  /* one brown; hover cue is the underline */

  /* Surfaces */
  --surface-page:   var(--paper);
  --surface-card:   var(--white);
  --surface-raised: var(--white);
  --surface-sunken: var(--paper-2);
  --surface-inverse:var(--brown-600);  /* unified brown (was var(--ink)) */
  --surface-mist:   var(--mist-100);

  /* Brand actions */
  --brand:          var(--brown-600);
  --brand-hover:    var(--brown-700);
  --brand-active:   var(--brown-800);
  --brand-subtle:   var(--brown-50);

  /* Borders */
  --border-subtle:  #EBE5DD;
  --border-default: #DED6CB;
  --border-strong:  #C7BBAC;
  --border-focus:   var(--brown-600);

  /* Focus ring */
  --ring: 0 0 0 3px color-mix(in srgb, var(--brown-600) 28%, transparent);
}