/* ==========================================================================
   base.css — reset, font faces, the two type ramps, layout utilities
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/Inter-Variable.woff2") format("woff2");
}

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

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--app-body-s);
  color: var(--text-dark);
  background: var(--grey-light);          /* never white — see ARCHITECTURE §4 */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 2px solid var(--wrc-rackman);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ---------- APP type ramp (Rackman) ------------------------------------- */
.t-title-xl { font-size: var(--app-title-xl); font-weight: 600; }
.t-title-l  { font-size: var(--app-title-l);  font-weight: 600; }
.t-title-m  { font-size: var(--app-title-m);  font-weight: 600; }
.t-title-s  { font-size: var(--app-title-s);  font-weight: 600; }

.t-body-xl  { font-size: var(--app-body-xl); }
.t-body-l   { font-size: var(--app-body-l); }
.t-body-m   { font-size: var(--app-body-m); }
.t-body-s   { font-size: var(--app-body-s); }
.t-caption  { font-size: var(--app-caption); }
.t-micro    { font-size: var(--app-micro); }

.t-metric-l { font-size: var(--app-metric-l); font-weight: 600; letter-spacing: -.01em; }
.t-metric-m { font-size: var(--app-metric-m); font-weight: 600; letter-spacing: -.01em; }

/* the app's field-label voice — caps, small, tracked */
.t-label {
  font-size: var(--app-label);
  font-weight: 500;
  letter-spacing: var(--app-ls-label);
  color: var(--text-light);
  text-transform: uppercase;
}
.t-label-section {
  font-size: var(--app-label-sec);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--text-medium);
  text-transform: uppercase;
}

/* ---------- WEB type ramp (storefront) ---------------------------------- */
.w-display { font-size: var(--web-display); line-height: 1.1; }
.w-h1      { font-size: var(--web-h1); line-height: var(--web-lh); }
.w-h2      { font-size: var(--web-h2); line-height: var(--web-lh); }
.w-h3      { font-size: var(--web-h3); line-height: var(--web-lh); }
.w-lede    { font-size: var(--web-lede); line-height: var(--web-lh); }
.w-body    { font-size: var(--web-body); line-height: var(--web-lh); }
.w-meta    { font-size: var(--web-meta); line-height: var(--web-lh); font-weight: 500; }
.w-nav     { font-size: var(--web-nav); }
.w-caption { font-size: var(--web-caption); }
.w-micro   { font-size: var(--web-micro); }
.w-price   { font-size: var(--web-price); font-weight: 600; }
.w-title   { font-size: var(--web-title); font-weight: 600; line-height: var(--web-lh); }
.w-product-title { font-size: var(--web-product-title); font-weight: 500; line-height: var(--web-lh); }
.w-section-label {
  font-size: var(--web-section-label); font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-light);
}

/* ---------- ink + weight utilities -------------------------------------- */
.ink-dark   { color: var(--text-dark); }
.ink-medium { color: var(--text-medium); }
.ink-light  { color: var(--text-light); }
.ink-green  { color: var(--wrc-green); }
.ink-orange { color: var(--wrc-orange); }
.ink-blue   { color: var(--wrc-rackman); }
.ink-red    { color: var(--status-red); }

.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

.tabnum { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.tr     { text-align: right; }
.tc     { text-align: center; }

/* ---------- layout utilities -------------------------------------------- */
.row  { display: flex; align-items: center; }
.col  { display: flex; flex-direction: column; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.center { align-items: center; }
.between { justify-content: space-between; }
.end { justify-content: flex-end; }
.start-top { align-items: flex-start; }

.g-2 { gap: var(--space-2); }   .g-4 { gap: var(--space-4); }
.g-6 { gap: var(--space-6); }   .g-8 { gap: var(--space-8); }
.g-10{ gap: var(--space-10); }  .g-12{ gap: var(--space-12); }
.g-14{ gap: var(--space-14); }  .g-16{ gap: var(--space-16); }
.g-18{ gap: var(--space-18); }  .g-20{ gap: var(--space-20); }
.g-24{ gap: var(--space-24); }

.rule { height: 1px; background: var(--black-7); border: 0; width: 100%; }
.vrule { width: 1px; align-self: stretch; background: var(--black-7); }

.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;
}

.hide { display: none !important; }

@media (max-width: 767px) { .hide-mobile { display: none !important; } }
@media (min-width: 768px) { .only-mobile { display: none !important; } }