/* ============================================================
   Xprez Marketing — Base layer & brand helpers
   Element defaults for the dark theme + a few brand utilities.
   ============================================================ */

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

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-primary);
  margin: 0;
  letter-spacing: var(--ls-tight);
}

a { color: var(--text-accent); text-decoration: none; }
::selection { background: rgba(62,198,255,0.30); color: #fff; }

/* ---- Brand utilities ---- */

/* Eyebrow / kicker — spaced cyan caps used above headlines */
.xz-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--text-accent);
}

/* Gradient text — cyan→purple accent on key words */
.xz-gradient-text {
  background: var(--xz-gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Full brand gradient (lime→cyan→purple), for hero accents */
.xz-gradient-brand-text {
  background: var(--xz-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Hairline gradient rule — the accent divider */
.xz-rule-accent {
  height: 2px; border: 0;
  background: var(--xz-gradient-accent);
}

/* Card surface */
.xz-card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
}

/* Outlined / stroke display heading — the "4 SPRINTS" / "Why Xprez?" motif.
   Transparent fill with an accent text-stroke. Use at large sizes only. */
.xz-display-outline {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  letter-spacing: var(--ls-mega);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--xz-cyan);
  text-stroke: 1.5px var(--xz-cyan);
}

/* Handwritten signature accent (founder, sign-offs) */
.xz-signature {
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1;
}