/* ============================================================
   TYPOGRAPHY — EVA-01 Neon Monolith
   Space Grotesk (headlines) + Manrope (body)
   ============================================================ */

/* Google Fonts loaded in HTML via <link rel="preconnect"> */

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--leading-normal);
  color: var(--color-on-surface);
  background-color: var(--surface-base);
}

/* === DISPLAY & HEADLINES === */

.text-display {
  font-family: var(--font-headline);
  font-size: var(--text-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h1, .text-h1 {
  font-family: var(--font-headline);
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h2, .text-h2 {
  font-family: var(--font-headline);
  font-size: var(--text-h2);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

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

h4, h5, h6 {
  font-family: var(--font-headline);
  font-weight: 500;
  line-height: var(--leading-snug);
}

/* === BODY TEXT === */

p {
  font-family: var(--font-body);
  line-height: var(--leading-normal);
  color: var(--color-on-surface-dim);
}

.text-body-lg {
  font-size: var(--text-body-lg);
  line-height: var(--leading-normal);
}

.text-body {
  font-size: var(--text-body);
}

.text-body-sm {
  font-size: var(--text-body-sm);
}

/* === LABELS === */

.text-label {
  font-family: var(--font-headline);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.text-label-sm {
  font-family: var(--font-headline);
  font-size: var(--text-label-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

/* === NAV LABELS — ALL CAPS === */

.nav-label {
  font-family: var(--font-headline);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* === UTILITY COLORS === */

.text-primary     { color: var(--color-primary-container); }
.text-secondary   { color: var(--color-secondary); }
.text-tertiary    { color: var(--color-tertiary); }
.text-muted       { color: var(--color-on-surface-muted); }
.text-dim         { color: var(--color-on-surface-dim); }

/* === GRADIENT TEXT (logo) === */



/* === DECORATIVE NUMBER (section anchors) === */

.section-number {
  font-family: var(--font-headline);
  font-size: clamp(4rem, 10vw, 8rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary-container);
  opacity: 0.4;
  letter-spacing: var(--tracking-tight);
  user-select: none;
  pointer-events: none;
}