/* ============================================================
   Strike Wedge — base elements + brand utility classes
   Thin layer of conveniences for cards, kits and specimens.
   Components reference the CSS custom properties directly.
   ============================================================ */

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

::selection {
  background: var(--sw-orange);
  color: var(--sw-beige);
}

/* ---- Light (brand/web) base ---- */
.sw-light {
  background: var(--surface-page);
  color: var(--text-strong);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---- Dark (tech-app) base ---- */
.sw-dark {
  background: var(--app-canvas);
  color: var(--app-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* ---- Page container ---- */
.sw-container {
  width: 100%;
  max-width: var(--width-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- Display headings ---- */
.sw-display-xl { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--text-display-xl); line-height: var(--lh-display); letter-spacing: var(--track-display); }
.sw-display-lg { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--text-display-lg); line-height: var(--lh-heading); letter-spacing: var(--track-tight); }
.sw-display-md { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--text-display-md); line-height: var(--lh-heading); letter-spacing: var(--track-tight); }

/* ---- Body ---- */
.sw-body { font-family: var(--font-sans); font-weight: var(--fw-light); font-size: var(--text-lg); line-height: var(--lh-body); letter-spacing: var(--track-body); }

/* ---- Uppercase UI label (Work Sans heavy, tracked) ---- */
.sw-label {
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-size: var(--text-2xs);
}

/* ---- Mono kicker / button text (IBM Plex Mono, caps) ---- */
.sw-kicker {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--track-kicker);
  font-size: var(--text-xs);
}

/* ---- Mono data / numeric ---- */
.sw-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }