/* NovusElement — base resets & type helpers
   Kept minimal; the system is token-driven. Helper classes mirror the type scale
   so specimen cards and quick layouts can apply a named style in one class. */

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

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  letter-spacing: var(--type-body-ls);
  color: var(--color-body);
  background: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Type utilities (name -> the full size/weight/lh/ls recipe) ---- */
.t-hero        { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--type-hero-display-size); line-height: var(--type-hero-display-lh); letter-spacing: var(--type-hero-display-ls); }
.t-display-lg  { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--type-display-lg-size); line-height: var(--type-display-lg-lh); letter-spacing: var(--type-display-lg-ls); }
.t-display-md  { font-family: var(--font-text); font-weight: var(--weight-semibold); font-size: var(--type-display-md-size); line-height: var(--type-display-md-lh); letter-spacing: var(--type-display-md-ls); }
.t-lead        { font-family: var(--font-text); font-weight: var(--weight-regular); font-size: var(--type-lead-size); line-height: var(--type-lead-lh); letter-spacing: var(--type-lead-ls); }
.t-lead-airy   { font-family: var(--font-text); font-weight: var(--weight-light); font-size: var(--type-lead-airy-size); line-height: var(--type-lead-airy-lh); letter-spacing: var(--type-lead-airy-ls); }
.t-tagline     { font-family: var(--font-text); font-weight: var(--weight-semibold); font-size: var(--type-tagline-size); line-height: var(--type-tagline-lh); letter-spacing: var(--type-tagline-ls); }
.t-body        { font-family: var(--font-text); font-weight: var(--weight-regular); font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: var(--type-body-ls); }
.t-body-strong { font-family: var(--font-text); font-weight: var(--weight-semibold); font-size: var(--type-body-strong-size); line-height: var(--type-body-strong-lh); letter-spacing: var(--type-body-strong-ls); }
.t-caption     { font-family: var(--font-text); font-weight: var(--weight-regular); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: var(--type-caption-ls); }
.t-fine-print  { font-family: var(--font-text); font-weight: var(--weight-regular); font-size: var(--type-fine-print-size); line-height: var(--type-fine-print-lh); letter-spacing: var(--type-fine-print-ls); }
.t-nav-link    { font-family: var(--font-text); font-weight: var(--weight-regular); font-size: var(--type-nav-link-size); line-height: var(--type-nav-link-lh); letter-spacing: var(--type-nav-link-ls); }