/* =========================================================================
   BREWLINK THEME — shared design tokens for the coffee-ordering UI.
   Loaded on every page (see base.html) before the page's own stylesheet, so
   every page's buttons, cards and badges can read the same tokens instead of
   repeating their own hex codes. Keeps the whole system — landing, login,
   menu, drink builder, cart, account — reading as one ordering website.
   ========================================================================= */

:root {
  /* ---- brand palette: deep forest green and mint. The tokens keep their first (coffee) names
     so every stylesheet that reads them follows the palette. ---- */
  --bl-espresso: #0f2a1f;
  --bl-brown-darker: #0a2118;
  --bl-brown-dark: #0f2e21;
  --bl-brown: #1f5a41;
  --bl-brown-light: #2b7355;
  --bl-cream: #e8f5ee;
  --bl-cream-soft: #f1f9f5;
  --bl-cream-deep: #d3e8dc;
  --bl-white: #fbfefc;

  /* ---- accent: the "order now" pop, like a delivery app's brand colour ---- */
  --bl-accent: #3fbf86;
  --bl-accent-dark: #2f9e6e;
  --bl-accent-soft: #e3f6ec;

  --bl-success: #1f6b2c;
  --bl-danger: #a3221b;
  --bl-ink-soft: #557566;

  /* ---- shape + elevation, shared by every card/button on the site ---- */
  --bl-radius-sm: 10px;
  --bl-radius-md: 14px;
  --bl-radius-lg: 20px;
  --bl-radius-pill: 999px;

  --bl-shadow-btn: 0 8px 18px rgba(15,46,33, 0.28);
  --bl-shadow-btn-hover: 0 12px 24px rgba(15,46,33, 0.38);
  --bl-shadow-card: 0 6px 18px rgba(15,46,33, 0.12);
  --bl-shadow-card-hover: 0 16px 30px rgba(15,46,33, 0.2);

  --bl-grad-brown: linear-gradient(180deg, #2b7355 0%, #1f5a41 100%);
  --bl-grad-brown-hover: linear-gradient(180deg, #1f5a41 0%, #0f2e21 100%);
  --bl-grad-accent: linear-gradient(180deg, #52cc95 0%, #3fbf86 100%);
  --bl-grad-accent-hover: linear-gradient(180deg, #3fbf86 0%, #2f9e6e 100%);

  --bl-ease: cubic-bezier(0.2, 0.9, 0.3, 1);

  /* ---- the dark, minimal look: hero pages sit on deep green with mint accents ---- */
  --bl-night: #0b2419;          /* page background of the dark pages */
  --bl-night-2: #113526;        /* a panel on it */
  --bl-night-line: rgba(255, 255, 255, 0.1);
  --bl-mint: #9fe3bf;           /* accent words on dark ("YOURS?") */
  --bl-mint-card: #bde9d2;      /* the big mint card behind a drink */
  --bl-on-dark: #ffffff;
  --bl-on-dark-muted: #a7c4b6;
  --bl-font-display: 'Poppins', 'Josefin Sans', sans-serif;
}

/* ---- a small "Popular / Best seller" style tag, for use on menu cards ---- */
.bl-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #fff;
  background: var(--bl-grad-accent);
  border-radius: var(--bl-radius-pill);
  box-shadow: 0 4px 10px rgba(47,158,110, 0.35);
  white-space: nowrap;
}

/* ---- a plain eyebrow chip, for small "Order online" style labels ---- */
.bl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bl-brown-dark);
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(15,46,33, 0.18);
  border-radius: var(--bl-radius-pill);
}