/* me-bottle-tokens.css — liquid colour per fragrance (keyed by product handle) and the matching card tint.
   Defaults only: the theme settings "Liquid: …" (snippets/me-tokens.liquid) win over these because they are
   emitted on :root, while everything here sits on :where(:root) with zero specificity.
   Mirror of the preview map in dev/preview/placeholders.js — keep both in sync.
   Tint = liquid at 9 % over paper. The hex values are the pre-mixed fallback; color-mix() takes over when supported. */
:where(:root) {
  --me-liquid-salt-and-gorse: #E9D98A;
  --me-liquid-wet-slate: #8B99A6;
  --me-liquid-glasshouse-fig: #7E9A6F;
  --me-liquid-midsummer-hay: #C9963E;
  --me-liquid-cathedral-smoke: #7A7672;
  --me-liquid-blackberry-lane: #6E3F5C;

  --me-tint-salt-and-gorse: #F5F1E5;
  --me-tint-wet-slate: #ECEBE8;
  --me-tint-glasshouse-fig: #EBEBE3;
  --me-tint-midsummer-hay: #F2EBDE;
  --me-tint-cathedral-smoke: #EBE8E3;
  --me-tint-blackberry-lane: #EAE3E1;
}
@supports (background: color-mix(in srgb, red 9%, white)) {
  :where(:root) {
    --me-tint-salt-and-gorse: color-mix(in srgb, var(--me-liquid-salt-and-gorse) 9%, var(--color-paper, #F6F3EE));
    --me-tint-wet-slate: color-mix(in srgb, var(--me-liquid-wet-slate) 9%, var(--color-paper, #F6F3EE));
    --me-tint-glasshouse-fig: color-mix(in srgb, var(--me-liquid-glasshouse-fig) 9%, var(--color-paper, #F6F3EE));
    --me-tint-midsummer-hay: color-mix(in srgb, var(--me-liquid-midsummer-hay) 9%, var(--color-paper, #F6F3EE));
    --me-tint-cathedral-smoke: color-mix(in srgb, var(--me-liquid-cathedral-smoke) 9%, var(--color-paper, #F6F3EE));
    --me-tint-blackberry-lane: color-mix(in srgb, var(--me-liquid-blackberry-lane) 9%, var(--color-paper, #F6F3EE));
  }
}