/* Lab Effects — color tokens. Brand palette sampled from official logo/icon artwork;
   neutrals from the Shopify Horizon theme color schemes. */
:root {
  /* ---- Core brand ---- */
  --le-teal:            #24A7B8;  /* bright brand teal — flask icon */
  --le-teal-bright:     #36B5C4;  /* highlights, hovers on dark */
  --le-teal-deep:       #108090;  /* product names, headings (storefront) */
  --le-petrol:          #125D67;  /* wordmark, headings on light */
  --le-ink:             #072326;  /* main dark bg / dark surfaces / text */
  --le-ink-2:           #051518;  /* deepest ink */

  /* Gold — THE action + accent color (buttons, highlights, stars) */
  --le-gold:            #DAA423;
  --le-gold-hover:      #c08f17;
  --le-gold-soft:       #f3e6c0;

  /* Leaf green — botanical / category accent */
  --le-green:           #60B050;
  --le-green-dark:      #408040;
  --le-green-soft:      #e7f0df;

  /* Cream — storefront product-card surface */
  --le-cream:           #EDEEE2;

  /* Aroma-family category colors (badge tabs) */
  --aroma-gassy:        #F06020;
  --aroma-earthy:       #D08040;
  --aroma-herbal:       #60B050;
  --aroma-floral:       #B26FB0;
  --aroma-citrus:       #DAA423;

  /* Teal tint ramp */
  --le-teal-900: #0c343a;
  --le-teal-800: #124b54;
  --le-teal-700: #125d67;
  --le-teal-600: #1a8190;
  --le-teal-500: #24a7b8;
  --le-teal-400: #54bdca;
  --le-teal-300: #8ad4dd;
  --le-teal-200: #bce6eb;
  --le-teal-100: #e0f3f6;
  --le-teal-50:  #f0f9fb;

  /* ---- Neutrals ---- */
  --le-white:    #ffffff;
  --le-paper:    #f5f5f5;
  --le-sage:     #eef1ea;
  --le-mist:     #e1edf5;
  --le-line:     #e6e6e6;
  --le-line-soft:#0000000f;
  --le-charcoal: #333333;
  --le-graphite: #4a4a4a;

  /* ---- Semantic aliases ---- */
  --color-bg:            var(--le-white);
  --color-bg-subtle:     var(--le-paper);
  --color-bg-botanical:  var(--le-sage);
  --color-bg-science:    var(--le-mist);
  --color-bg-dark:       var(--le-ink);

  --color-fg:            #0a2326;
  --color-fg-2:          #0a2326cf;
  --color-fg-3:          #0a232699;
  --color-fg-on-dark:    #ffffff;
  --color-fg-on-dark-2:  #ffffffcc;

  --color-heading:       var(--le-petrol);
  --color-link:          var(--le-teal-deep);
  --color-link-hover:    var(--le-petrol);

  --color-border:        var(--le-line);
  --color-border-strong: #0a232633;

  --color-primary:       var(--le-gold);
  --color-primary-hover: var(--le-gold-hover);
  --color-on-primary:    var(--le-ink);

  --color-accent:        var(--le-teal-deep);
  --color-accent-green:  var(--le-green);

  --color-success: #1a8146;
  --color-sale:    #b23b2e;
  --color-info:    var(--le-teal-600);
}