/* reference-head.css — the reference's token vocabulary + minimal reset.
   Loads FIRST (the reference loads it before its theme stylesheet): it only
   names the tokens with plain fallbacks; reference.css redefines every one.
   Lifted verbatim apart from this header. */

:root {
  /* ── colour ───────────────────────────────────────────────────────────────
     Page ground, raised surfaces, ink at three strengths, hairlines, and ONE
     accent. Memory of past failures: one loud accent used once beats an accent
     splashed across a band, a marquee and every button. --c-accent-ink is the
     text colour that sits ON the accent and must clear 4.5:1 against it. */
  --c-bg:            #f7f7f7;
  --c-surface:       #ffffff;
  --c-surface-2:     #f0f0f0;
  --c-ink:           #1a1a1a;
  --c-ink-muted:     #5c5c5c;
  --c-ink-subtle:    #8a8a8a;
  --c-line:          #e0e0e0;
  --c-accent:        #444444;
  --c-accent-ink:    #ffffff;
  --c-accent-soft:   #ededed;
  --c-sale:          #a02020;
  --c-success:       #1f6b3a;

  /* Bars that carry their own colour scheme. The announcement bar above the
     header is a recurring move in the premium demos — set it dark and let it
     carry the live offer. */
  --c-announce-bg:   #1a1a1a;
  --c-announce-ink:  #ffffff;
  --c-header-bg:     #ffffff;
  --c-header-ink:    #1a1a1a;
  --c-footer-bg:     #1a1a1a;
  --c-footer-ink:    #f2f2f2;

  /* ── type ─────────────────────────────────────────────────────────────────
     Two families at most. Take the merchant's real computed fonts from
     store.json.brand.fonts before reaching for anything else.
     WARNING: --fs-* are absolute sizes, not ratios. A past bug shipped a
     divisor here and made captions larger than body copy; no gate caught it. */
  --font-display:    ui-sans-serif, system-ui, sans-serif;
  --font-body:       ui-sans-serif, system-ui, sans-serif;

  --fs-hero:         clamp(2.5rem, 6vw, 5rem);
  --fs-h1:           clamp(2rem, 4vw, 3rem);
  --fs-h2:           clamp(1.5rem, 2.6vw, 2.125rem);
  --fs-h3:           1.25rem;
  --fs-body:         1rem;
  --fs-small:        0.875rem;
  --fs-micro:        0.75rem;

  --lh-tight:        1.05;
  --lh-heading:      1.2;
  --lh-body:         1.6;

  --tracking-display: 0em;
  --tracking-caps:    0.08em;

  --fw-display:      600;
  --fw-body:         400;
  --fw-bold:         600;

  /* ── space ────────────────────────────────────────────────────────────── */
  --gutter:          1.25rem;
  --gutter-lg:       2rem;
  --section-y:       clamp(3rem, 7vw, 6rem);
  --section-y-tight: clamp(2rem, 4vw, 3.5rem);
  --container:       1280px;
  --container-narrow: 820px;

  /* ── shape ────────────────────────────────────────────────────────────────
     Sample the merchant's real --button-radius / --card-radius off their live
     theme CSS. A store running 30px pill buttons is not a square-corner brand
     however heritage its meta description sounds. */
  --radius-card:     0px;
  --radius-button:   0px;
  --radius-input:    0px;
  --radius-pill:     999px;
  --border-width:    1px;

  /* ── elevation & motion ─────────────────────────────────────────────────── */
  --shadow-card:     none;
  --shadow-pop:      0 12px 32px rgb(0 0 0 / 0.12);
  --ease:            cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:             220ms;

  /* ── layout knobs read off the reference demo ─────────────────────────────
     --grid-cols-lg is 3 or 4. Never 5: five cards on a 1280px container leaves
     ~228px each and forces 10px titles.
     --hero-ratio-* is the fix for letterboxing. If the merchant's banner is a
     fixed ratio, give the hero BAND that exact ratio per breakpoint — then the
     hero is full-bleed AND uncropped, with no grey wings and no blurred mat. */
  --grid-cols-lg:    4;
  --grid-cols-md:    3;
  --grid-cols-sm:    2;
  --hero-ratio-lg:   16 / 9;
  --hero-ratio-sm:   4 / 5;
  --card-ratio:      3 / 4;

}

/* ===========================================================================
   Minimal reset. Not a look — just removes browser defaults that fight you.
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}
button { background: none; border: 0; padding: 0; cursor: pointer; }

table { border-collapse: collapse; }

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* Icon utility. Size it here or per-component; colour always comes from
   `currentColor` so an icon inherits whatever text colour surrounds it. */
.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  vertical-align: middle;
}
.icon--sm { width: 1rem;   height: 1rem; }
.icon--lg { width: 1.5rem; height: 1.5rem; }

/* Accessible-only text, for labelling icon controls without showing words. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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