/* Scaleezy base layer. Import order: base.css, motion.css, scaleezy.css (or tryon2buy.css), then the module's own CSS.
   Element rules live in @layer base so that Tailwind utilities (which sit in @layer utilities) and any
   unlayered module CSS win over them. The .sz-* utilities below the layer are unlayered on purpose.
   No @import here, so a Tailwind module can inline this file. Fonts come from fonts.css (Scaleezy) or
   fonts-tryon2buy.css imported first, or from a <link> in the page head. */

@layer base {
  html {
    font-family: var(--sz-font-sans, var(--t2b-font-sans, system-ui, sans-serif));
    font-size: 16px;
    line-height: var(--sz-leading-body, var(--t2b-leading-body, 1.5));
    font-variant-numeric: tabular-nums;
    -webkit-text-size-adjust: 100%;
    color: var(--sz-ink, var(--t2b-ink));
    background: var(--sz-canvas, var(--t2b-cream));
  }

  body {
    margin: 0;
    min-height: 100dvh;
  }

  h1, h2, h3, h4, h5 {
    margin: 0;
    font-weight: var(--sz-weight-semibold, 600);
    line-height: var(--sz-leading-tight, 1.2);
  }
  h1 { font-size: var(--sz-text-h2, 2.25rem); }
  h2 { font-size: var(--sz-text-h4, 1.5rem); }
  h3 { font-size: var(--sz-text-h5, 1.25rem); }
  h4, h5 { font-size: var(--sz-text-body, 1rem); }

  p, ul, ol { margin: 0; }
  strong, b, th { font-weight: var(--sz-weight-semibold, 600); }
  [hidden] { display: none !important; }

  button, input, select, textarea {
    font: inherit;
    color: inherit;
  }

  /* One focus ring for the whole suite: 2px, offset 2px, accent colour, both themes. */
  :focus { outline: none; }
  :focus-visible {
    outline: 2px solid var(--sz-green, var(--t2b-orange, #1C421D));
    outline-offset: 2px;
  }
}

/* ---- Utilities (unlayered) ---- */

.sz-prose { max-width: 70ch; }

/* Nothing tappable is smaller than the profile floor (44px; POS sets --sz-tap to 48px). */
.sz-tap {
  min-width: var(--sz-tap);
  min-height: var(--sz-tap);
}

/* Cap the page, never the shell. */
.sz-page {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--sz-space-4, 16px);
  box-sizing: border-box;
}

.sz-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Text roles. 12px is meta only: timestamps, legal, kbd, table heads. */
.sz-meta { font-size: var(--sz-text-meta, 0.75rem); line-height: var(--sz-leading-meta, 1.4); color: var(--sz-ink-2); }
.sz-secondary { font-size: var(--sz-text-secondary, 0.875rem); }
.sz-money { font-variant-numeric: tabular-nums; font-weight: var(--sz-weight-semibold, 600); }

/* Hover-only extras exist only where hover exists. */
@media (hover: hover) {
  .sz-hover-extra { opacity: 0; }
  :hover > .sz-hover-extra, :focus-within > .sz-hover-extra { opacity: 1; }
}