/*
 * THEME=olive: logo concept 2, "Olive Sprig" (brand/logo-concepts/concept-2.svg).
 * Loaded after base.css and commerce.css, and only for this theme (src/themes.mjs). The layout is
 * unchanged: this file swaps colors (CSS custom properties) and the heading font, and sizes the logo.
 *
 * Palette: olive #5C6B3A, ink #1E2318, warm off-white #F1EEE8.
 * Contrast (WCAG 2.2 AA):
 *   white on olive 5.8:1, olive on #FAFAFA 5.6:1, olive on the off-white hover 5.0:1
 *   deep olive #4A5730 (text on tinted hovers) on the off-white 6.7:1
 *   ink on #FAFAFA 15.4:1
 */

/* ------------------------------------------------------------------ tokens */
:root {
  --ink: #1E2318;              /* the concept's ink, a near-black olive (was #111111) */
  --line-strong: #5C6B3A;

  --brand: #5C6B3A;            /* buttons, active chips, ladder highlight, cart count, focus rings */
  --brand-strong: #4A5730;     /* olive text on tinted (hover/active) backgrounds */
  --brand-on: #FFFFFF;         /* text on --brand */
  --brand-text: #1E2318;       /* headings */
  --brand-link: #5C6B3A;       /* link text */
  --brand-eyebrow: #5C6B3A;    /* small uppercase labels */
  --brand-decor: #5C6B3A;      /* underlines, check marks, badge borders */
  --brand-focus: #5C6B3A;

  --accent: #F1EEE8;           /* hover tint (the concept's warm off-white) */
  --accent-2: #E9E5DB;
  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
}

/* -------------------------------------------------------------------- type */
/* EB Garamond, as in the logo. It is larger on the body than Cormorant at the same size,
   so the biggest headings are set about 8% smaller to keep the same line breaks and rhythm. */
h1, h2, h3, h4 { color: var(--brand-text); font-weight: 400; }
h3, h4 { font-weight: 500; }
h1 { font-size: 2.3rem; font-size: clamp(2.3rem, 1.6rem + 2.75vw, 3.65rem); }
h2 { font-size: 1.85rem; font-size: clamp(1.85rem, 1.45rem + 1.7vw, 2.625rem); }
.hero-title { max-width: 11ch; font-weight: 400; font-size: 2.625rem; font-size: clamp(2.625rem, 1.75rem + 3.85vw, 4.75rem); }
@media (min-width: 960px) { .hero-title { font-weight: 400; } }
.page-title { font-size: 2.3rem; font-size: clamp(2.3rem, 1.6rem + 2.75vw, 3.4rem); }
.cart-page-section .page-title { font-size: 2.1rem; font-size: clamp(2.1rem, 1.6rem + 1.4vw, 2.625rem); }
.card-title { font-size: 1.25rem; }
.card-title, .tile-name, .cart-line-title, .mobile-nav-link, .ladder-off, .product-ladder-title { font-weight: 500; }

.eyebrow, .split-copy .eyebrow { color: var(--brand-eyebrow); }

/* ------------------------------------------------------------ links, focus */
a, .text-link, .link-btn { text-decoration-color: var(--brand-decor); }
a:hover, .text-link:hover, .link-btn:hover { text-decoration-color: currentColor; }
.text-link, .prose a, .sms-consent a, .signup-change, .contact-email, .footer-email a { color: var(--brand-link); }
.link-btn:hover, .footer-links a:hover, .crumbs a:hover { color: var(--brand-link); }
.tile:hover .tile-cta, .tile:focus-visible .tile-cta { text-decoration-color: var(--brand-decor); }
@media (hover: hover) {
  .accordion > summary:hover { text-decoration-color: var(--brand-decor); }
  .card-title a:hover, .cart-line-title:hover { text-decoration-color: var(--brand-decor); }
  .prose a:hover { color: var(--brand-strong); }
}

:focus { outline: 2px solid var(--brand-focus); }
.qty-input:focus,
.gallery-thumb:focus-visible,
.gallery-zoom:focus-visible,
.gallery-track:focus-visible,
.lightbox-btn:focus-visible,
.promo-applied:focus,
.preview-notice:focus,
.drawer-preview:focus { outline-color: var(--brand-focus); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand-focus); box-shadow: 0 0 0 1px var(--brand-focus); }
.skip-link { background: var(--brand); color: var(--brand-on); }

/* ----------------------------------------------------------------- buttons */
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--brand-on); }
.btn-secondary { border-color: var(--brand); color: var(--brand-strong); }
.btn-ghost { color: var(--brand-strong); }
@media (hover: hover) {
  .btn-primary:hover { background: var(--accent); border-color: var(--brand); color: var(--brand-strong); }
  .btn-secondary:hover, .btn-ghost:hover { background: var(--accent); }
}
.btn-primary:active { background: var(--accent-2); color: var(--brand-strong); }
.btn.is-loading::after { border-color: var(--brand); border-right-color: transparent; }
.btn-primary.is-loading::after { border-color: var(--brand-on); border-right-color: transparent; }
.btn-primary.is-loading, .btn-primary.is-loading:hover { background: var(--brand); }

.checkbox input { accent-color: var(--brand); }

/* ---------------------------------------------------------- header, footer */
.announcement { background: var(--brand); color: var(--brand-on); }
.cart-count { background: var(--brand); color: var(--brand-on); }
.nav-link::after { background: var(--brand-decor); height: 2px; }
.mobile-nav-link[aria-current="page"] { text-decoration-color: var(--brand-decor); }

/* ------------------------------------------------- cards, badges and chips */
.card-add { border-color: var(--brand); color: var(--brand-strong); }
.card-add.is-added { background: var(--brand); border-color: var(--brand); color: var(--brand-on); }
.card-add[disabled] { border-color: var(--line); color: var(--muted); }
.badge { border-color: var(--brand-decor); color: var(--brand-strong); }
@media (hover: hover) { .chip:hover { border-color: var(--brand); } }
.chip[aria-pressed="true"],
.chip.is-active { background: var(--brand); border-color: var(--brand); color: var(--brand-on); }

/* ---------------------------------------------- discount ladder, progress */
.ladder { border-color: var(--brand); }
.ladder-step { border-left-color: var(--brand); }
.ladder-step.is-active { background: var(--brand); color: var(--brand-on); }
.ladder-step.is-active .ladder-qty { color: var(--brand-on); }
.progress-bar { background: var(--brand); }
.product-ladder-msg strong { color: var(--brand-strong); }

/* ------------------------------------------------------------------- misc */
.toast { background: var(--ink); color: #FFFFFF; }
.newsletter-step-num { border-color: var(--brand); color: var(--brand-strong); }
.status-facts li::before { background: var(--brand-decor); }
.code-box { border-color: var(--brand); }
.code-copy.is-copied { background: var(--brand); color: var(--brand-on); }
.value-icon { color: var(--brand); }

/* --------------------------------------------------- product, cart, thanks */
.gallery-dot { border-color: var(--brand); }
.gallery-dot.is-active { background: var(--brand); }
.gallery-thumb.is-active { border-color: var(--brand); }
.product-soldout-flag { border-color: var(--brand); color: var(--brand-strong); }
.pdp-trust li::before { border-left-color: var(--brand-decor); border-bottom-color: var(--brand-decor); }
.product-features li::before,
.plain-list li::before { background: var(--brand-decor); }
.thanks-steps li::before { border-color: var(--brand); color: var(--brand-strong); }

/* -------------------------------------------------------------------- logo */
/* The concept's "primary logo on white" (inline SVG in views/themes/olive/). 236px fits a 390px phone
   header between the menu and cart buttons; 340px on desktop. */
.wordmark--logo { padding: 0; }
.brand-logo { display: block; width: 236px; max-width: 100%; height: auto; }
.wordmark--footer .brand-logo { width: 260px; }
@media (max-width: 374px) { .brand-logo { width: 206px; } }
@media (max-width: 339px) { .brand-logo { width: 184px; } }
@media (min-width: 640px) { .brand-logo { width: 280px; } }
@media (min-width: 960px) {
  .brand-logo { width: 340px; }
  .wordmark--footer .brand-logo { width: 280px; }
}