/* ==========================================================================
   Core — design tokens & base typography
   Cormorant Garamond + Jost · bordeaux / brass / cream.
   ========================================================================== */

:root {
  --jl-ink:            #1B1512;
  --jl-bordeaux:       #6E1C2F;
  --jl-bordeaux-dark:  #4F1322;
  --jl-brass:          #B5904D;
  --jl-brass-light:    #caa563;

  --jl-bg:             #FFFCF7;
  --jl-cream-tint:     #FAF4EA;
  --jl-cream:          #F3E9DB;
  --jl-cream-pale:     #F8F2E7;

  --jl-text-70:        rgba(27, 21, 18, .70);
  --jl-text-50:        rgba(27, 21, 18, .50);
  --jl-text-42:        rgba(27, 21, 18, .42);
  --jl-text-40:        rgba(27, 21, 18, .40);
  --jl-line:           rgba(27, 21, 18, .12);

  --jl-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --jl-sans:  "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --jl-r-chip:  5px;
  --jl-r-media: 14px;
  --jl-r-pill:  999px;

  --jl-shadow-bordeaux: 0 12px 30px rgba(110, 28, 47, .25);

  /* Close/× icon — drawn as a crisp SVG and applied via mask, so the colour
     still follows the element's `color` (hover states keep working). Shared by
     every close/remove button (cart, mini-cart, relay modal). */
  --jl-icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6 18 18M18 6 6 18' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Smooth in-page anchor scrolling. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body,
button, input, select, textarea {
  font-family: var(--jl-sans);
  -webkit-font-smoothing: antialiased;
}
body {
  background-color: var(--jl-bg);
  color: var(--jl-ink);
  line-height: 1.7;
}
h1, h2, h3, h4, h5, h6,
.entry-title, .page-title, .product_title,
.woocommerce-loop-product__title,
.widget-title, .section-title,
.storefront-product-section .section-title {
  font-family: var(--jl-serif);
  font-weight: 600;
  color: var(--jl-ink);
  letter-spacing: -.01em;
  line-height: 1.1;
}
em, i { color: var(--jl-bordeaux); font-style: italic; }
a { color: var(--jl-bordeaux); }
a:hover { color: var(--jl-bordeaux-dark); }