/* =========================================================================
   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: #1a1513;
  --bl-brown-darker: #14100d;
  --bl-brown-dark: #1d1815;
  --bl-brown: #5c4033;          /* American walnut */
  --bl-brown-light: #7d553c;
  --bl-cream: #f6f0ec;
  --bl-cream-soft: #f9f6f3;
  --bl-cream-deep: #e9e0d9;
  --bl-white: #fbfefc;

  /* ---- accent: the "order now" pop, like a delivery app's brand colour ---- */
  --bl-accent: #95ae81;
  --bl-accent-dark: #7a9069;
  --bl-accent-soft: #f7efe9;

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

  /* ---- 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(29,24,21, 0.28);
  --bl-shadow-btn-hover: 0 12px 24px rgba(29,24,21, 0.38);
  --bl-shadow-card: 0 6px 18px rgba(29,24,21, 0.12);
  --bl-shadow-card-hover: 0 16px 30px rgba(29,24,21, 0.2);

  --bl-grad-brown: linear-gradient(180deg, #6b4b3c 0%, #5c4033 100%);          /* the walnut buttons */
  --bl-grad-brown-hover: linear-gradient(180deg, #5c4033 0%, #4b3429 100%);
  --bl-grad-accent: linear-gradient(180deg, #a2bb8f 0%, #95ae81 100%);
  --bl-grad-accent-hover: linear-gradient(180deg, #95ae81 0%, #7a9069 100%);

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

  /* ---- buttons: American walnut, and a hint of green while one is pressed ---- */
  --bl-walnut: #5c4033;
  --bl-walnut-hover: #4b3429;
  --bl-sage: #6f8f5f;           /* a pressed button */
  --bl-sage-soft: #eaf1e4;      /* a pressed outline button */
  --bl-sage-ink: #3f5a37;

  /* ---- the dark, minimal look: hero pages sit on deep green with mint accents ---- */
  --bl-night: #16110f;          /* page background of the dark pages */
  --bl-night-2: #211c19;        /* a panel on it */
  --bl-night-line: rgba(255, 255, 255, 0.1);
  --bl-mint: #c7d8bb;           /* accent words on dark ("YOURS?") */
  --bl-mint-card: #d6e1ce;      /* the big mint card behind a drink */
  --bl-on-dark: #ffffff;
  --bl-on-dark-muted: #c5bab0;
  --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(122,144,105, 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(29,24,21, 0.18);
  border-radius: var(--bl-radius-pill);
}

/* =========================================================================
   BUTTONS — American walnut; pressed (and for a moment after a tap, see
   main.js), a hint of green. Danger buttons (delete, cancel order) stay red.
   ========================================================================= */
:is(.cart-btn--primary, .cs-btn:not(.cs-btn--light), .dv-btn--go, .fav-btn--go, .ord-empty__go, .acct-logout button,
    .pos-btn--go, .pos-pay-btn, .ac-btn--go, .ac-add, .cz-next, .cz-chat-send, .hm-cta, .order-btn,
    .panel-box button, .top-btn, .hero-btn, .login-btn):is(:active, .is-pressed):not(:disabled) {
  color: #fff !important;
  background: var(--bl-sage) !important;
  border-color: var(--bl-sage) !important;
  box-shadow: 0 0 0 4px rgba(111, 143, 95, 0.25) !important;
  transition: background 0.08s, box-shadow 0.08s, border-color 0.08s !important;
}

/* the outline buttons: a light green wash instead */
:is(.cart-btn--ghost, .cs-btn--light, .cs-pill, .dv-btn--fav, .dv-btn--soft, .pos-btn--soft, .pos-update-btn,
    .ac-btn:not(.ac-btn--go):not(.ac-btn--danger), .cz-btn, .cz-prev, .cz-confirm-no, .add-cart-btn,
    .cat-menu-btn):is(:active, .is-pressed):not(:disabled) {
  color: var(--bl-sage-ink) !important;
  background: var(--bl-sage-soft) !important;
  border-color: var(--bl-sage) !important;
}

/* =========================================================================
   FIT TO THE SCREEN — fit.js zooms the whole page on big screens (and a
   little the other way on short ones) and sets --fit to the zoom. Zoom
   would scale vh/vw lengths as well, so every stylesheet writes them
   divided by it: calc(100vh / var(--fit, 1)). New ones should too.
   Paper is paper: printing is never zoomed.
   ========================================================================= */
@media print {
  html { zoom: 1 !important; --fit: 1 !important; }
}

/* the reminder that the cup has a price (templates/_cup_note.html), wherever a drink's price shows */
.cup-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  padding: 9px 12px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  color: #5c4033;
  background: #fbf3e4;
  border: 1px solid #efd9b4;
  border-radius: 12px;
}

.cup-note i { flex: none; font-size: 1.05rem; line-height: 1.2; color: #8a5a0a; }
.cup-note strong { color: #3d2a1e; }