/* ============================================================
   JAMAR — Bricks Builder design tokens
   Source of truth for tokens used by jamarbox.com.
   Import via Bricks → Style Manager → Framework tab.
   Pairs with WEBSITE_STYLE_GUIDE.md and BRANDBOOK.md.
   ============================================================ */

:root {
  /* ----- Colors: Brand ----- */
  --jm--color-brand: #E52215;
  --jm--color-brand-hover: #E95449;
  --jm--color-on-brand: #FFFFFF;

  /* ----- Colors: Surface & text ----- */
  --jm--color-text: #1C1B17;
  --jm--color-text-muted: #5A5A5A;
  --jm--color-text-subtle: #A7A7A7;
  --jm--color-surface: #FFFFFF;
  --jm--color-surface-alt: #F5F5F5;
  --jm--color-surface-dark: #2E2C28;
  --jm--color-on-surface-dark: #FFFFFF;

  /* ----- Colors: Borders ----- */
  --jm--color-border: #D6D6D6;
  --jm--color-border-strong: #A7A7A7;
  --jm--color-border-focus: #E52215;

  /* ----- Colors: Semantic ----- */
  --jm--color-success: #1F8A4C;
  --jm--color-warning: #D89B1E;
  --jm--color-error: #B7251A;

  /* ----- Colors: Overlays ----- */
  --jm--color-overlay: rgba(28, 27, 23, 0.6);
  --jm--color-shadow: rgba(28, 27, 23, 0.08);

  /* ----- Typography: families & weights ----- */
  --jm--font-display: 'Inter', Arial, Helvetica, sans-serif;
  --jm--font-body: 'Inter', Arial, Helvetica, sans-serif;
  --jm--font-mono: 'JetBrains Mono', Consolas, 'Courier New', monospace;

  --jm--weight-regular: 400;
  --jm--weight-medium: 500;
  --jm--weight-semibold: 600;
  --jm--weight-bold: 700;
  --jm--weight-extrabold: 800;

  --jm--leading-tight: 1.2;
  --jm--leading-snug: 1.35;
  --jm--leading-normal: 1.5;
  --jm--leading-relaxed: 1.65;

  --jm--tracking-tight: -0.02em;
  --jm--tracking-normal: 0;
  --jm--tracking-wide: 0.04em;
  --jm--tracking-eyebrow: 0.2em;   /* very wide — reserved for .jm-eyebrow */

  /* ----- Typography: fluid sizes (clamp(min, fluid, max)) -----
     Min viewport 360px (22.5rem) → Max viewport 1280px (80rem) */
  --jm--text-xs: 0.75rem;                                                 /* 12 */
  --jm--text-s:  0.875rem;                                                /* 14 */
  --jm--text-base: 1rem;                                                  /* 16 */
  --jm--text-m:  1rem;                                                    /* alias */
  --jm--text-l:  clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);          /* 18 → 20 */
  --jm--text-xl: clamp(1.25rem, 1.1413rem + 0.5435vw, 1.5rem);            /* 20 → 24 */
  --jm--text-2xl: clamp(1.375rem, 1.2120rem + 0.8152vw, 1.75rem);         /* 22 → 28 */
  --jm--text-3xl: clamp(1.625rem, 1.3533rem + 1.3587vw, 2.25rem);         /* 26 → 36 */
  --jm--text-4xl: clamp(2rem, 1.5652rem + 2.1739vw, 3rem);                /* 32 → 48 */
  --jm--text-5xl: clamp(2.5rem, 1.8478rem + 3.2609vw, 4rem);              /* 40 → 64 */

  /* ----- Spacing: fluid scale (4px base) ----- */
  --jm--space-3xs: 0.125rem;                                              /* 2 */
  --jm--space-2xs: 0.25rem;                                               /* 4 */
  --jm--space-xs:  0.5rem;                                                /* 8 */
  --jm--space-s:   clamp(0.75rem, 0.6685rem + 0.3804vw, 1rem);            /* 12 → 16 */
  --jm--space-m:   clamp(1rem, 0.8478rem + 0.6522vw, 1.5rem);             /* 16 → 24 */
  --jm--space-l:   clamp(1.5rem, 1.2283rem + 1.3587vw, 2.5rem);           /* 24 → 40 */
  --jm--space-xl:  clamp(2rem, 1.6196rem + 1.7935vw, 3.5rem);             /* 32 → 56 */
  --jm--space-2xl: clamp(3rem, 2.4565rem + 2.7174vw, 5rem);               /* 48 → 80 */
  --jm--space-3xl: clamp(4rem, 3.0978rem + 4.5109vw, 7.5rem);             /* 64 → 120 */
  --jm--space-4xl: clamp(6rem, 4.6413rem + 6.7935vw, 10rem);              /* 96 → 160 */

  /* ----- Layout ----- */
  --jm--container-max: 1280px;
  --jm--container-pad: clamp(1rem, 4vw, 2rem);
  --jm--content-max: 72ch;

  /* Brand-red signature bar — 4 px constant used on header bottom edge,
     footer top edge, hero seam, eyebrow accent, letterhead, slide dividers. */
  --jm--bar-thickness: 4px;

  --jm--radius-xs: 2px;
  --jm--radius-s: 4px;
  --jm--radius-m: 6px;
  --jm--radius-l: 12px;
  --jm--radius-pill: 999px;

  --jm--shadow-soft: 0 4px 12px var(--jm--color-shadow);
  --jm--shadow-card: 0 1px 2px rgba(28, 27, 23, 0.04), 0 4px 16px rgba(28, 27, 23, 0.06);
  --jm--shadow-focus: 0 0 0 4px rgba(229, 34, 21, 0.2);

  --jm--z-base: 1;
  --jm--z-sticky: 100;
  --jm--z-overlay: 800;
  --jm--z-modal: 900;
  --jm--z-toast: 1000;

  /* ----- Motion ----- */
  --jm--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --jm--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --jm--duration-fast: 120ms;
  --jm--duration-base: 200ms;
  --jm--duration-slow: 320ms;

  /* ----- Breakpoints (for use in custom CSS) ----- */
  --jm--bp-sm: 480px;
  --jm--bp-md: 768px;
  --jm--bp-lg: 1024px;
  --jm--bp-xl: 1280px;
  --jm--bp-2xl: 1536px;
}

/* ============================================================
   Theme defaults
   ============================================================ */

html { font-size: 100%; }
body {
  background: var(--jm--color-surface);
  color: var(--jm--color-text);
  font-family: var(--jm--font-body);
  font-size: var(--jm--text-base);
  line-height: var(--jm--leading-normal);
}
*, *::before, *::after { box-sizing: border-box; }

::selection {
  background: var(--jm--color-brand);
  color: var(--jm--color-on-brand);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--jm--font-display);
  color: var(--jm--color-text);
  line-height: var(--jm--leading-tight);
  letter-spacing: var(--jm--tracking-tight);
  margin: 0 0 var(--jm--space-s);
}
h1 { font-size: var(--jm--text-4xl); font-weight: var(--jm--weight-extrabold); letter-spacing: -0.02em; }
h2 { font-size: var(--jm--text-3xl); font-weight: var(--jm--weight-bold);     margin-top: var(--jm--space-xl); }
h3 { font-size: var(--jm--text-2xl); font-weight: var(--jm--weight-bold);     margin-top: var(--jm--space-l); }
h4 { font-size: var(--jm--text-xl);  font-weight: var(--jm--weight-semibold); margin-top: var(--jm--space-l); }
h5 { font-size: var(--jm--text-l);   font-weight: var(--jm--weight-semibold); margin-top: var(--jm--space-m); }
h6 { font-size: var(--jm--text-m);   font-weight: var(--jm--weight-semibold); margin-top: var(--jm--space-m);
     text-transform: uppercase;  letter-spacing: var(--jm--tracking-wide); }

a {
  color: var(--jm--color-brand);
  text-underline-offset: 0.2em;
  transition: color var(--jm--duration-base) var(--jm--ease-out);
}
a:hover { color: var(--jm--color-brand-hover); }
a:focus-visible {
  outline: 2px solid var(--jm--color-brand);
  outline-offset: 2px;
  border-radius: var(--jm--radius-xs);
}

/* ============================================================
   Global classes — Layout
   ============================================================ */

.jm-container {
  width: 100%;
  max-width: var(--jm--container-max);
  margin-inline: auto;
  padding-inline: var(--jm--container-pad);
}

.jm-section { padding-block: var(--jm--space-xl); }
.jm-section--hero  { padding-block: var(--jm--space-4xl); }
.jm-section--major { padding-block: var(--jm--space-2xl); }
.jm-section--alt   { background: var(--jm--color-surface-alt); }
.jm-section--dark  { background: var(--jm--color-surface-dark); color: var(--jm--color-on-surface-dark); }

.jm-stack > * + *    { margin-top: var(--jm--space-m); }
.jm-stack-l > * + *  { margin-top: var(--jm--space-l); }

.jm-brand-bar { position: relative; padding-left: var(--jm--space-m); }
.jm-brand-bar::before {
  content: '';
  position: absolute; inset: 0 auto 0 0;
  width: var(--jm--bar-thickness);
  background: var(--jm--color-brand);
}

/* Horizontal variant — full-width 4 px brand-red rule.
   Use on header bottom edge, footer top edge, section dividers. */
.jm-brand-bar--h {
  display: block;
  width: 100%;
  height: var(--jm--bar-thickness);
  background: var(--jm--color-brand);
  border: 0;
}

/* ============================================================
   Global classes — Eyebrow
   Small uppercase label above headings.
   Per brandbook: muted text with a brand-red leading accent
   (dot or short bar) — the accent is red, the text is not.
   ============================================================ */

.jm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--jm--space-xs);
  margin: 0 0 var(--jm--space-xs);
  font-family: var(--jm--font-display);
  font-size: var(--jm--text-xs);
  font-weight: var(--jm--weight-bold);
  letter-spacing: var(--jm--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--jm--color-text-muted);
}
.jm-eyebrow__dot {
  flex: 0 0 auto;
  width: var(--jm--space-xs);
  height: var(--jm--space-xs);
  border-radius: 50%;
  background: var(--jm--color-brand);
}
.jm-eyebrow__bar {
  flex: 0 0 auto;
  width: var(--jm--space-l);
  height: var(--jm--bar-thickness);
  background: var(--jm--color-brand);
}

/* ============================================================
   Global classes — Buttons
   ============================================================ */

.jm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--jm--space-2xs);
  padding: 12px 20px;
  font-family: var(--jm--font-body);
  font-size: var(--jm--text-base);
  font-weight: var(--jm--weight-semibold);
  line-height: 1;
  letter-spacing: 0.02em;
  border-radius: var(--jm--radius-s);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--jm--duration-base) var(--jm--ease-out),
              color var(--jm--duration-base) var(--jm--ease-out),
              border-color var(--jm--duration-base) var(--jm--ease-out);
}
.jm-btn:focus-visible { outline: none; box-shadow: var(--jm--shadow-focus); }

.jm-btn--lg { padding: 16px 28px; font-size: var(--jm--text-l); }
.jm-btn--sm { padding: 8px 14px;  font-size: var(--jm--text-s); }

.jm-btn--primary           { background: var(--jm--color-brand); color: var(--jm--color-on-brand); }
.jm-btn--primary:hover     { background: var(--jm--color-brand-hover); }

.jm-btn--secondary         { background: var(--jm--color-surface); color: var(--jm--color-text); border-color: var(--jm--color-text); }
.jm-btn--secondary:hover   { background: var(--jm--color-text); color: var(--jm--color-surface); }

.jm-btn--tertiary          { background: transparent; color: var(--jm--color-brand); padding-inline: 0; }
.jm-btn--tertiary:hover    { text-decoration: underline; }

.jm-btn[disabled],
.jm-btn--disabled {
  background: var(--jm--color-border);
  color: var(--jm--color-text-subtle);
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
   Global classes — Cards
   ============================================================ */

.jm-card {
  background: var(--jm--color-surface);
  border: 1px solid var(--jm--color-border);
  border-radius: var(--jm--radius-m);
  padding: var(--jm--space-l);
  transition: box-shadow var(--jm--duration-base) var(--jm--ease-out),
              border-color var(--jm--duration-base) var(--jm--ease-out);
}
.jm-card:hover {
  box-shadow: var(--jm--shadow-card);
  border-color: var(--jm--color-border-strong);
}
.jm-card--product { padding: 0; overflow: hidden; }
.jm-card--product .jm-card__image {
  aspect-ratio: 1 / 1;
  background: var(--jm--color-surface-alt);
}
.jm-card--product .jm-card__body { padding: var(--jm--space-m); }

/* ============================================================
   Global classes — Forms
   ============================================================ */

.jm-field { display: flex; flex-direction: column; gap: var(--jm--space-2xs); }
.jm-field__label {
  font-size: var(--jm--text-s);
  font-weight: var(--jm--weight-medium);
  color: var(--jm--color-text);
}
.jm-field__input,
.jm-field__textarea,
.jm-field__select {
  height: 44px;
  padding: 0 14px;
  font: inherit;
  color: var(--jm--color-text);
  background: var(--jm--color-surface);
  border: 1px solid var(--jm--color-border);
  border-radius: var(--jm--radius-s);
  transition: border-color var(--jm--duration-base) var(--jm--ease-out),
              box-shadow var(--jm--duration-base) var(--jm--ease-out);
}
.jm-field__textarea {
  height: auto;
  padding: 12px 14px;
  min-height: 120px;
  resize: vertical;
}
.jm-field__input:focus,
.jm-field__textarea:focus,
.jm-field__select:focus {
  outline: none;
  border-color: var(--jm--color-brand);
  box-shadow: var(--jm--shadow-focus);
}
.jm-field__help { font-size: var(--jm--text-xs); color: var(--jm--color-text-muted); }
.jm-field--error .jm-field__input,
.jm-field--error .jm-field__textarea { border-color: var(--jm--color-error); }
.jm-field--error .jm-field__help { color: var(--jm--color-error); }

/* ============================================================
   WooCommerce overrides
   ============================================================ */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce-page button.button.alt,
.woocommerce #respond input#submit {
  background: var(--jm--color-brand);
  color: var(--jm--color-on-brand);
  border: 0;
  border-radius: var(--jm--radius-s);
  padding: 12px 20px;
  font-weight: var(--jm--weight-semibold);
  letter-spacing: 0.02em;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover { background: var(--jm--color-brand-hover); }

.woocommerce ul.products li.product .price { color: var(--jm--color-text); font-weight: var(--jm--weight-bold); }
.woocommerce ul.products li.product .price ins { background: transparent; color: var(--jm--color-brand); }

.woocommerce-info,
.woocommerce-message { border-top-color: var(--jm--color-brand); }
.woocommerce-info::before,
.woocommerce-message::before { color: var(--jm--color-brand); }

/* ============================================================
   Utilities
   ============================================================ */

.jm-text-brand   { color: var(--jm--color-brand); }
.jm-text-muted   { color: var(--jm--color-text-muted); }
.jm-text-center  { text-align: center; }
.jm-uppercase    { text-transform: uppercase; letter-spacing: var(--jm--tracking-wide); }
.jm-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}