/*
 * Design tokens.
 *
 * This file is the source of truth. theme.json mirrors a subset of it so the
 * block editor offers the same palette, but theme.json cannot express the
 * non-linear spacing scale, the asymmetric motion durations, the z-index
 * ladder, or the chip line-height compensation — so those live only here.
 */

:root {
  /* ---- layout ---- */
  --pm-content-max: 1200px;
  --pm-grid-margin-lg: 48px;
  --pm-grid-margin-md: 24px;
  --pm-gutter-lg: 24px;
  --pm-gutter-sm: 16px;

  /* ---- spacing ----
   * Deliberately non-linear. The 32 -> 52 jump is a hard break between
   * component spacing and section spacing; it is what produces the page
   * rhythm. Do not smooth this into an even scale.
   */
  --pm-sp-1: 4px;
  --pm-sp-2: 8px;
  --pm-sp-3: 12px;
  --pm-sp-4: 16px;
  --pm-sp-5: 24px;
  --pm-sp-6: 32px;
  --pm-sp-section-sm: 52px;
  --pm-sp-section-lg: 88px;

  /* ---- color ---- */

  /* Brand — sampled from the Brand Guidelines PDF swatches, not the Pantone
   * book: PRIMARY Pantone 19-4052 TCX Classic Blue, SECONDARY Pantone
   * 11-4202 TCX Star White. Blue owns identity + commit actions; Star White
   * is the page itself.
   */
  --pm-brand: #0f4d81;
  --pm-brand-dark: #0b3a62;

  --pm-red: #ee0000;
  --pm-red-dark: #cc0000;
  --pm-red-hover-fill: #ee3535;
  --pm-red-hover-text: #ef5555;

  /* Primary commit action carries the brand blue (owner decision, overrides
   * the reference's near-black); red only marks sale prices, errors and the
   * sale flag. */
  --pm-cta: var(--pm-brand);
  --pm-cta-hover: var(--pm-brand-dark);

  --pm-text: #000;
  --pm-text-hover: #2a2a2a;
  --pm-price-lg: #1b1b1b;
  --pm-text-2: #6a6a6a;
  --pm-placeholder: #767676;
  --pm-disabled: #ababab;

  /* Clean white canvas (masarishop-style); Star White is reserved for the
   * header and footer bands only. */
  --pm-star: #eeefe9;
  --pm-surface: #ffffff;
  --pm-surface-2: #f4f4f4;
  --pm-surface-3: #f7f7f7;
  --pm-surface-4: #fafafa;

  --pm-focus: #005db5;
  --pm-focus-hover: #006ed7;
  --pm-success: #00ab0f;
  --pm-warning: #ebbe00;

  /* Two different border colours by context. The PLP tile swatch is
   * decorative (#dadada); the PDP selector chip is interactive and needs the
   * higher contrast (#767676). Unifying these is the most likely way this
   * design quietly degrades — keep them separate.
   */
  --pm-hairline: #dadada;
  --pm-swatch-border: #dadada;
  --pm-chip-border: #767676;

  /* ---- radius ----
   * The 2026 refresh of the reference rounds interactive controls: chips,
   * CTAs and steppers carry 4px, filter dropdowns are pills. Cards, images
   * and layout surfaces stay square.
   */
  --pm-r-0: 0;
  --pm-r-chip: 4px;
  --pm-r-pill: 999px;
  --pm-r-dot: 8px;

  /* ---- motion ---- */
  --pm-dur-micro: 180ms;
  --pm-dur-enter: 225ms;
  --pm-dur-leave: 195ms;
  --pm-dur-std: 300ms;
  --pm-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --pm-ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* ---- z-index ladder ---- */
  --pm-z-header-overlay: 50;
  --pm-z-header: 48;
  --pm-z-filter-tab: 42;
  --pm-z-sticky: 40;
  --pm-z-nav-col: 2;

  /* ---- type ---- */
  --pm-font-display: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pm-font-body: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  --pm-body-size: 15px;
  --pm-body-weight: 300;
  --pm-body-lh: 1.5;

  --pm-title-size: 19px;
  --pm-caption-size: 13px;
  --pm-badge-size: 13px;

  --pm-price-tracking: 0.025rem;

  /* ---- component dimensions ---- */
  --pm-promobar-h: 36px;
  --pm-header-h-lg: 72px;
  --pm-header-h-sm: 64px;
  /* promo bar + header + 1px hairline */
  --pm-filterbar-top: 109px;

  --pm-swatch-size: 20px;
  --pm-swatch-pdp: 40px;
  --pm-chip-size: 36px;
  --pm-chip-h: 44px;
  --pm-chip-long-w: 88px;
  --pm-card-ratio: 3 / 4;
}

/* Weight 300 at 15px on running text is the single most characteristic trait
 * of this design. Browsers default to 400 and plugin CSS routinely resets to
 * `font-weight: normal`, so this is asserted on body and re-asserted in
 * components.css where plugins are known to fight it.
 */
body {
  font-family: var(--pm-font-body);
  font-size: var(--pm-body-size);
  font-weight: var(--pm-body-weight);
  line-height: var(--pm-body-lh);
  color: var(--pm-text);
  background: var(--pm-surface);
}

/* Radius 0 is the rule, not a default to be overridden per component. */
button,
input,
select,
textarea,
.button,
.wp-block-button__link {
  border-radius: var(--pm-r-0);
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--pm-focus);
  outline-offset: 1px;
}