/* ============================================================
   EVRI Ingredients — Color Tokens  (v2, from brand assets)
   Primary navy #092b59 · accent green #579f39 · cool neutrals.
   Derived from the official logo + corporate deck.
   Base values first, semantic aliases at the bottom.
   Legacy warm names (sand/stone/honey/leaf) are kept as
   back-compat aliases mapped into the cool palette.
   ============================================================ */
:root {
  /* --- Brand: Navy (primary) ------------------------------ */
  --navy-50:  #E7ECF3;
  --navy-100: #C5D0E1;
  --navy-200: #90A4C2;
  --navy-300: #5A77A1;
  --navy-400: #2C5082;
  --navy-500: #143A6B;
  --navy-600: #092B59;  /* brand primary — logo navy */
  --navy-700: #071F45;
  --navy-800: #051630;
  --navy-900: #050B16;  /* deepest — deck dark */

  /* --- Accent: Green (logo green) ------------------------- */
  --green-50:  #EEF5E9;
  --green-100: #D8E9CB;
  --green-200: #B6D79E;
  --green-300: #90C26F;
  --green-400: #6FAE4B;
  --green-500: #579F39;  /* brand accent — logo green */
  --green-600: #498734;  /* re-mapped: was the old primary slot */
  --green-700: #3A6C29;
  --green-800: #2C5220;
  --green-900: #1F3A17;

  /* --- Cool neutrals: Mist → Gray → Ink ------------------- */
  --white:    #FFFFFF;
  --mist-50:  #F7F8FA;
  --mist-100: #F2F2F2;   /* deck light surface */

  /* --- Soft sand-gray (calm, neutral, near-white) --------- */
  --cream-50:  #FAFAF8;
  --cream-100: #F5F3EE;  /* page background — linen (option 13) */
  --cream-200: #E8E7E2;  /* sunken surface */
  --cream-300: #D9D8D1;  /* hairline border */
  --gray-200: #E4E6EA;
  --gray-300: #CCCFD6;
  --gray-400: #A8ACB4;
  --gray-500: #7C808A;
  --gray-600: #6B6B6B;   /* deck muted text */
  --ink-700:  #44464C;
  --ink-800:  #2B2B2B;   /* deck body text */
  --ink-900:  #1A1C20;

  /* --- Semantic palette ----------------------------------- */
  --success-50:  #EBF3EC;
  --success-500: #3C8F4A;
  --success-700: #2A6635;
  --warning-50:  #FBF1DD;
  --warning-500: #C58711;
  --warning-700: #8A5C09;
  --danger-50:   #F8EBE7;
  --danger-500:  #C0432F;
  --danger-700:  #8F2E20;
  --info-50:     #E7EEF6;
  --info-500:    #2C5082;
  --info-700:    #143A6B;

  /* --- Legacy aliases (deprecated — map to cool palette) -- */
  --honey-50:  var(--green-50);
  --honey-100: var(--green-100);
  --honey-200: var(--green-200);
  --honey-300: var(--green-400);
  --honey-400: var(--green-500);
  --honey-500: var(--green-600);
  --honey-600: var(--green-700);
  --leaf-300:  var(--green-200);
  --leaf-400:  var(--green-500);
  --leaf-500:  var(--green-600);
  --leaf-600:  var(--green-700);
  --sand-50:   var(--white);
  --sand-100:  var(--mist-50);
  --sand-200:  var(--mist-100);
  --stone-300: var(--gray-300);
  --stone-400: var(--gray-400);
  --stone-500: var(--gray-500);
  --stone-600: var(--gray-600);

  /* ========================================================
     SEMANTIC ALIASES — reference these in product code
     ======================================================== */

  /* Text */
  --text-strong:     var(--ink-900);
  --text-body:       var(--ink-800);
  --text-muted:      var(--gray-600);
  --text-subtle:     var(--gray-500);
  --text-on-brand:   var(--white);
  --text-on-accent:  var(--white);
  --text-brand:      var(--navy-600);
  --text-accent:     var(--green-500);
  --text-link:       var(--navy-600);
  --text-link-hover: var(--navy-700);

  /* Surfaces */
  --surface-page:     var(--cream-100);
  --surface-raised:   var(--cream-50);
  --surface-sunken:   var(--cream-200);
  --surface-card:     var(--cream-50);
  --surface-inset:    var(--cream-200);
  --surface-brand:    var(--navy-600);
  --surface-brand-strong: var(--navy-700);
  --surface-brand-soft:   var(--navy-50);
  --surface-dark:     var(--navy-900);
  --surface-accent:   var(--green-500);
  --surface-accent-soft:  var(--green-50);
  --surface-leaf-soft:    var(--green-50);

  /* Borders */
  --border-subtle:   var(--cream-300);
  --border-default:  var(--cream-300);
  --border-strong:   var(--gray-400);
  --border-brand:    var(--navy-600);
  --border-focus:    var(--navy-500);

  /* Interactive — brand button */
  --btn-brand-bg:        var(--navy-600);
  --btn-brand-bg-hover:  var(--navy-700);
  --btn-brand-bg-active: var(--navy-800);
  --btn-accent-bg:       var(--green-500);
  --btn-accent-bg-hover: var(--green-600);

  /* Focus ring */
  --ring: 0 0 0 3px color-mix(in srgb, var(--navy-500) 32%, transparent);
}