/* AI Lab — Base element styles & typographic helpers.
   Applied lightly so the system stays composable. */

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings use the display family */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-primary);
  margin: 0 0 0.4em;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 1em; color: var(--text-secondary); }

a { color: var(--text-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--highlight-soft); }

/* ── Display / heading helper classes ─────────────────────── */
.t-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-semibold);
}
.t-h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); }
.t-h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
.t-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--text-secondary); }
.t-body { font-size: var(--fs-body); line-height: var(--lh-normal); }
.t-caption { font-size: var(--fs-caption); color: var(--text-muted); }

/* Uppercase eyebrow / overline */
.t-overline {
  font-family: var(--font-body);
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Gradient text (brand) */
.t-gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.t-teal { color: var(--accent-teal); }
.t-purple { color: var(--highlight-purple); }