/* ===========================================================================
   Composio — Base reset + typography utility classes
   Helper classes that bind the type-scale tokens into ready-to-use roles.
   Optional for consumers, but used throughout the cards & UI kits.
   =========================================================================== */

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

.composio-canvas {
  background: var(--surface-canvas);
  color: var(--text-body);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Display ------------------------------------------------------------- */
.t-display-mega { font-family: var(--font-sans); font-weight: var(--weight-medium);
  font-size: var(--type-display-mega-size); line-height: var(--type-display-mega-lh);
  letter-spacing: var(--type-display-mega-ls); color: var(--text-display); }
.t-display-xl { font-family: var(--font-sans); font-weight: var(--weight-medium);
  font-size: var(--type-display-xl-size); line-height: var(--type-display-xl-lh);
  letter-spacing: var(--type-display-xl-ls); color: var(--text-display); }
.t-display-lg { font-family: var(--font-sans); font-weight: var(--weight-medium);
  font-size: var(--type-display-lg-size); line-height: var(--type-display-lg-lh);
  letter-spacing: var(--type-display-lg-ls); color: var(--text-display); }
.t-display-md { font-family: var(--font-sans); font-weight: var(--weight-medium);
  font-size: var(--type-display-md-size); line-height: var(--type-display-md-lh);
  letter-spacing: var(--type-display-md-ls); color: var(--text-display); }
.t-display-sm { font-family: var(--font-sans); font-weight: var(--weight-medium);
  font-size: var(--type-display-sm-size); line-height: var(--type-display-sm-lh);
  letter-spacing: var(--type-display-sm-ls); color: var(--text-display); }

/* --- Titles -------------------------------------------------------------- */
.t-title-md { font-family: var(--font-sans); font-weight: var(--weight-semibold);
  font-size: var(--type-title-md-size); line-height: var(--type-title-md-lh);
  letter-spacing: var(--type-title-md-ls); color: var(--text-strong); }
.t-title-sm { font-family: var(--font-sans); font-weight: var(--weight-semibold);
  font-size: var(--type-title-sm-size); line-height: var(--type-title-sm-lh);
  letter-spacing: var(--type-title-sm-ls); color: var(--text-strong); }

/* --- Body ---------------------------------------------------------------- */
.t-body-md { font-family: var(--font-sans); font-weight: var(--weight-regular);
  font-size: var(--type-body-md-size); line-height: var(--type-body-md-lh);
  letter-spacing: var(--type-body-md-ls); color: var(--text-body); }
.t-body-sm { font-family: var(--font-sans); font-weight: var(--weight-regular);
  font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh);
  letter-spacing: var(--type-body-sm-ls); color: var(--text-body); }
.t-caption { font-family: var(--font-sans); font-weight: var(--weight-regular);
  font-size: var(--type-caption-size); line-height: var(--type-caption-lh);
  letter-spacing: var(--type-caption-ls); color: var(--text-muted); }
.t-caption-upper { font-family: var(--font-sans); font-weight: var(--weight-semibold);
  font-size: var(--type-caption-upper-size); line-height: var(--type-caption-upper-lh);
  letter-spacing: var(--type-caption-upper-ls); text-transform: uppercase; color: var(--text-muted); }

/* --- Code / utility ------------------------------------------------------ */
.t-code { font-family: var(--font-mono); font-weight: var(--weight-regular);
  font-size: var(--type-code-size); line-height: var(--type-code-lh);
  letter-spacing: var(--type-code-ls); }
.t-button { font-family: var(--font-sans); font-weight: var(--weight-medium);
  font-size: var(--type-button-size); line-height: var(--type-button-lh);
  letter-spacing: var(--type-button-ls); }
.t-nav { font-family: var(--font-sans); font-weight: var(--weight-medium);
  font-size: var(--type-nav-size); line-height: var(--type-nav-lh);
  letter-spacing: var(--type-nav-ls); }