/* ===========================================================================
   COLORS — Il Mondo delle Erbe
   ---------------------------------------------------------------------------
   Drawn from the shop logo: deep pine green (#004238), warm butter cream
   (#fff7b2) and the olive-sage of the botanical illustration (#a2b57b).
   Earth accents (honey, terracotta, berry, lavender) extend the apothecary
   palette without leaving the natural world.

   Layered as:  base ramps  ->  semantic aliases (role tokens).
   Prefer the semantic aliases in product code.
   =========================================================================== */

:root {
  /* --- BOSCO — deep pine green (primary / ink) ------------------------------ */
  --bosco-950: #00211c;
  --bosco-900: #002b24;
  --bosco-800: #003a31;
  --bosco-700: #004238;  /* ← BRAND green: logo lettering & border */
  --bosco-600: #0c5446;
  --bosco-500: #1f6857;  /* interactive default */
  --bosco-400: #4f8979;
  --bosco-300: #84ab9d;
  --bosco-200: #bcd2c9;
  --bosco-100: #dfeae5;
  --bosco-50:  #f0f6f3;

  /* --- SALVIA — olive sage (secondary) ------------------------------------- */
  --salvia-900: #3f4a26;
  --salvia-800: #4f5c30;
  --salvia-700: #647140;
  --salvia-600: #7e8d54;
  --salvia-500: #a2b57b;  /* ← BRAND sage: botanical illustration */
  --salvia-400: #b9c897;
  --salvia-300: #cfdab4;
  --salvia-200: #e2e8cd;
  --salvia-100: #eef2e0;
  --salvia-50:  #f6f8ee;

  /* --- BURRO — butter cream (signature accent) ----------------------------- */
  --burro:      #fff7b2;  /* ← BRAND cream: logo oval interior */
  --burro-soft: #fdf3c4;
  --burro-deep: #f2e08a;

  /* --- PERGAMENA — warm parchment (surfaces) ------------------------------- */
  --paper-50:  #fffdf6;
  --paper-100: #fbf6e9;
  --paper-200: #f3ebd7;
  --paper-300: #e8dcc1;
  --paper-400: #d4c4a3;

  /* --- STONE — warm taupe-grey (text & neutral UI) ------------------------- */
  --stone-900: #2b2a24;
  --stone-800: #423f37;
  --stone-700: #57534a;
  --stone-600: #6f6a5e;
  --stone-500: #8c8676;
  --stone-400: #aaa491;
  --stone-300: #cfc9b8;
  --stone-200: #e6e1d3;
  --stone-100: #f2efe6;
  --stone-50:  #faf8f2;

  /* --- EARTH ACCENTS ------------------------------------------------------- */
  --miele:      #c98a2b;  /* honey / amber — oils, supplements, warmth */
  --miele-soft: #f6e6c4;
  --miele-deep: #8a5c14;

  --terracotta:      #b5582f;  /* clay — earthen accent */
  --terracotta-soft: #f3ddd0;
  --terracotta-deep: #8c3f1f;

  --mora:      #7b3b54;  /* berry / plum — botanical fruit */
  --mora-soft: #ecdbe2;
  --mora-deep: #5b2a3d;

  --lavanda:      #8d83ab;  /* herbal flower */
  --lavanda-soft: #e7e3f0;
  --lavanda-deep: #6a6088;

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

  /* Brand shortcuts */
  --brand-green: var(--bosco-700);
  --brand-sage:  var(--salvia-500);
  --brand-cream: var(--burro);

  /* Surfaces */
  --surface-page:    #f8f3e8;            /* app background — soft parchment */
  --surface-card:    var(--paper-50);    /* cards on the page */
  --surface-raised:  #ffffff;            /* popovers, menus, inputs */
  --surface-sunken:  var(--paper-200);   /* wells, muted fields */
  --surface-inverse: var(--bosco-700);   /* deep-green feature sections */
  --surface-sage:    var(--salvia-100);  /* tinted info panels */

  /* Text */
  --text-strong:   var(--bosco-900);   /* headings */
  --text-body:     #243a33;            /* default body — deep green-grey */
  --text-muted:    var(--stone-600);   /* secondary */
  /* stone-500 (#8c8676) dava 3.57:1 su --paper-50: sotto il minimo AA.
     Questo valore sta a 4.70:1 e resta più chiaro di --text-muted (5.33:1). */
  --text-subtle:   #787263;            /* captions, placeholder */
  --text-on-dark:  #f1f3e4;            /* on deep green */
  --text-on-sage:  var(--bosco-900);   /* on sage fills */
  --text-on-accent:#ffffff;            /* on saturated accents */
  --text-link:     var(--bosco-600);

  /* Borders */
  --border-subtle:  #ece3d0;
  --border-default: #ddcfb4;
  --border-strong:  #c8b78f;
  --border-inverse: rgba(241,243,228,0.22);
  --border-focus:   var(--bosco-500);

  /* Primary action */
  --action-primary-bg:        var(--bosco-700);
  --action-primary-bg-hover:  var(--bosco-800);
  --action-primary-bg-active: var(--bosco-900);
  --action-primary-fg:        #f1f3e4;

  /* Secondary action (sage) */
  --action-secondary-bg:        var(--salvia-100);
  --action-secondary-bg-hover:  var(--salvia-200);
  --action-secondary-bg-active: var(--salvia-300);
  --action-secondary-fg:        var(--bosco-800);

  /* Accent action (honey CTA)
     Testo verde scurissimo e non bianco: su miele il bianco dà 2.94:1,
     bosco-950 dà 5.80:1 (4.67:1 in hover) mantenendo il giallo del marchio. */
  --action-accent-bg:        var(--miele);
  --action-accent-bg-hover:  #b8791f;
  --action-accent-fg:        var(--bosco-950);

  /* Focus ring */
  --ring: 0 0 0 3px rgba(31,104,87,0.32);

  /* Semantic / status — mapped to natural tones */
  --success:        #3f7d4e;
  --success-soft:   #e4efe6;
  --success-strong: #2c5e39;

  --warning:        var(--miele);
  --warning-soft:   #f8ecd2;
  --warning-strong: var(--miele-deep);

  --danger:         #b23b2e;
  --danger-soft:    #f6ddd7;
  --danger-strong:  #8a2b20;

  --info:           var(--bosco-500);
  --info-soft:      var(--bosco-100);
  --info-strong:    var(--bosco-700);
}