/* ==========================================================================
   Typography — the text hierarchy. See docs/design-system.md §2.
   Semantic elements get default styles; .text-* classes apply the same
   styles when visual size must differ from document outline
   (e.g. an <h2> that looks like an H1, or the hero brand statement).
   ========================================================================== */

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
  background-color: var(--color-background);
}

/* ---------- Headings ------------------------------------------------------ */

h1, h2, h3, h4, h5, h6,
.text-h1, .text-h2, .text-h3, .text-h4, .text-h5 {
  font-family: var(--font-family-heading);
  color: var(--color-text-primary);
}

h1,
.text-h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-h1);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
}

h2,
.text-h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
}

h3,
.text-h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h3);
  line-height: var(--line-height-snug);
}

h4,
.text-h4 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-h4);
  line-height: var(--line-height-snug);
}

h5,
h6,
.text-h5 {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

/* Hero brand statement — "Secure. Build. Transform." */
.text-display {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
  color: var(--color-text-primary);
}

/* ---------- Body text ----------------------------------------------------- */

.text-lead {
  font-size: var(--font-size-lead);
  line-height: var(--line-height-lead);
}

small,
.text-small {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.text-caption,
figcaption {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-small);
  color: var(--color-text-muted);
}

/* Uppercase label above headings — "OUR SERVICES", "LET'S CONNECT" */
.text-label,
.eyebrow {
  display: block;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug); /* readable if a label wraps on small screens */
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* Navigation and button text (applied by components; available as utilities) */
.text-nav {
  font-size: var(--font-size-nav);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-none);
}

.text-button {
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-none);
}

strong,
b {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

/* ---------- Inline links -------------------------------------------------- */

a {
  color: var(--color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--transition-duration-fast) var(--transition-easing);
}

a:hover {
  color: var(--color-link-hover);
}

/* ---------- Text utilities ------------------------------------------------ */

/* Brand gradient text — large text only (≥ 24px), decorative emphasis
   such as "Transform." and "connect the dots." */
.text-gradient {
  color: var(--color-accent-blue); /* fallback */
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-primary { color: var(--color-text-primary); }
.text-muted { color: var(--color-text-muted); }
.text-inverse { color: var(--color-text-inverse); }
.text-center { text-align: center; }

/* Readable measure for running text */
.measure {
  max-width: 38em;
}

/* ---------- Dark surfaces ------------------------------------------------- */

.on-dark {
  color: var(--color-text-inverse-muted);
}

.on-dark :is(h1, h2, h3, h4, h5, h6, .text-display, strong) {
  color: var(--color-text-inverse);
}

.on-dark .eyebrow,
.on-dark .text-label {
  color: var(--color-text-inverse-muted);
}

.on-dark a:not(.btn) {
  color: var(--color-text-inverse);
}