/* ============================================================
   ENSTACKED GLOBAL UTILITIES
   Reusable section rhythm, typography, and spacing classes
   shared by ALL page templates. Values come exclusively from
   design-tokens.css — never hardcode px here.

   New templates should use the `es-` classes. The `rv-`
   aliases keep the revamped home page (and any page built
   during the revamp) working with the same single system.
   ============================================================ */

/* ── Section rhythm ─────────────────────────────────────────
   Fluid vertical padding: ~60px on mobile → 100px on desktop.
   Modifiers: --sm (compact), --lg (spacious), --flush-* (none). */
.es-section,
.rv-section { padding: var(--section-pad) 0; position: relative; }

.es-section--sm { padding-top: var(--section-pad-sm); padding-bottom: var(--section-pad-sm); }
.es-section--lg { padding-top: var(--section-pad-lg); padding-bottom: var(--section-pad-lg); }
.es-section--flush-top { padding-top: 0; }
.es-section--flush-bottom { padding-bottom: 0; }

/* Section backgrounds */
.es-bg-white, .rv-bg-white { background: var(--bg-surface); }
.es-bg-gray,  .rv-bg-gray  { background: var(--gray-50); }
.es-bg-dark,  .rv-bg-dark  { background: var(--gray-900); }
.es-bg-tint  { background: linear-gradient(180deg, var(--brand-50) 0%, var(--bg-surface) 100%); }

/* ── Section head ───────────────────────────────────────────
   Eyebrow + title + optional lede. Fluid gap to the content
   below (~36px mobile → 56px desktop). */
.es-section-head,
.rv-section-head { max-width: 780px; margin-bottom: var(--section-head-gap); }

.es-section-head.text-center,
.rv-section-head.text-center { margin-left: auto; margin-right: auto; }

/* Head gap modifiers — replaces ad-hoc inline margin overrides */
.es-section-head--tight { margin-bottom: var(--gap-fluid-sm); }
.es-section-head--flush { margin-bottom: 0; }

.es-section-head h1,
.es-section-head h2,
.rv-section-head h1,
.rv-section-head h2 {
  font-size: var(--fs-section-title);
  font-weight: 800;
  line-height: var(--lh-heading);
  letter-spacing: -0.02em;
  color: var(--text-heading);
  margin: 0;
}

.es-lede,
.rv-lede {
  font-size: var(--fs-lede);
  line-height: var(--lh-body);
  color: var(--text-body);
}

.es-section-head .es-lede,
.es-section-head .rv-lede,
.rv-section-head .es-lede,
.rv-section-head .rv-lede { margin: 20px 0 0; }

/* Eyebrow label */
.es-eyebrow,
.rv-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brand-600);
  margin-bottom: 18px;
}

.es-eyebrow::after,
.rv-eyebrow::after {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--brand-300);
}

.es-section-head.text-center .es-eyebrow,
.es-section-head.text-center .rv-eyebrow,
.rv-section-head.text-center .es-eyebrow,
.rv-section-head.text-center .rv-eyebrow { justify-content: center; }

.es-index, .rv-index { color: var(--text-muted); }

/* Accent highlight inside headings */
.es-hl, .rv-hl { color: var(--brand-500); font-style: italic; }

/* Dark-section variants (use on .es-bg-dark sections) */
.es-bg-dark .es-section-head h1, .es-bg-dark .es-section-head h2,
.es-bg-dark .rv-section-head h1, .es-bg-dark .rv-section-head h2,
.rv-bg-dark .es-section-head h1, .rv-bg-dark .es-section-head h2,
.rv-bg-dark .rv-section-head h1, .rv-bg-dark .rv-section-head h2 { color: var(--text-inverse); }

/* ── Typography utilities ──────────────────────────────────
   For headings/copy outside a section head. */
.t-hero          { font-size: var(--fs-hero); font-weight: 800; line-height: var(--lh-display); letter-spacing: -0.02em; color: var(--text-heading); }
.t-section-title { font-size: var(--fs-section-title); font-weight: 800; line-height: var(--lh-heading); letter-spacing: -0.02em; color: var(--text-heading); }
.t-title-md      { font-size: var(--fs-title-md); font-weight: 800; line-height: var(--lh-heading); letter-spacing: -0.02em; }
.t-title-sm      { font-size: var(--fs-title-sm); font-weight: 700; line-height: var(--lh-subhead); }
.t-card-title    { font-size: var(--fs-card-title); font-weight: 800; line-height: var(--lh-subhead); }
.t-lede-lg       { font-size: var(--fs-lede-lg); line-height: var(--lh-body); }
.t-lede          { font-size: var(--fs-lede); line-height: var(--lh-body); }
.t-body          { font-size: var(--fs-body); line-height: var(--lh-body); }
.t-small         { font-size: var(--fs-small); }
.t-caption       { font-size: var(--fs-caption); }

/* ── Spacing utilities ─────────────────────────────────────
   Token scale: 0=0  1=4px  2=8px  3=12px  4=16px
                5=24px  6=32px  7=48px  8=64px
   !important so they reliably win over component CSS —
   use them to replace inline style="" overrides. */
.u-mt-0 { margin-top: 0 !important; }
.u-mt-1 { margin-top: var(--space-1) !important; }
.u-mt-2 { margin-top: var(--space-2) !important; }
.u-mt-3 { margin-top: var(--space-3) !important; }
.u-mt-4 { margin-top: var(--space-4) !important; }
.u-mt-5 { margin-top: var(--space-5) !important; }
.u-mt-6 { margin-top: var(--space-6) !important; }
.u-mt-7 { margin-top: var(--space-7) !important; }
.u-mt-8 { margin-top: var(--space-8) !important; }

.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-1 { margin-bottom: var(--space-1) !important; }
.u-mb-2 { margin-bottom: var(--space-2) !important; }
.u-mb-3 { margin-bottom: var(--space-3) !important; }
.u-mb-4 { margin-bottom: var(--space-4) !important; }
.u-mb-5 { margin-bottom: var(--space-5) !important; }
.u-mb-6 { margin-bottom: var(--space-6) !important; }
.u-mb-7 { margin-bottom: var(--space-7) !important; }
.u-mb-8 { margin-bottom: var(--space-8) !important; }

.u-pt-0 { padding-top: 0 !important; }
.u-pt-1 { padding-top: var(--space-1) !important; }
.u-pt-2 { padding-top: var(--space-2) !important; }
.u-pt-3 { padding-top: var(--space-3) !important; }
.u-pt-4 { padding-top: var(--space-4) !important; }
.u-pt-5 { padding-top: var(--space-5) !important; }
.u-pt-6 { padding-top: var(--space-6) !important; }
.u-pt-7 { padding-top: var(--space-7) !important; }
.u-pt-8 { padding-top: var(--space-8) !important; }

.u-pb-0 { padding-bottom: 0 !important; }
.u-pb-1 { padding-bottom: var(--space-1) !important; }
.u-pb-2 { padding-bottom: var(--space-2) !important; }
.u-pb-3 { padding-bottom: var(--space-3) !important; }
.u-pb-4 { padding-bottom: var(--space-4) !important; }
.u-pb-5 { padding-bottom: var(--space-5) !important; }
.u-pb-6 { padding-bottom: var(--space-6) !important; }
.u-pb-7 { padding-bottom: var(--space-7) !important; }
.u-pb-8 { padding-bottom: var(--space-8) !important; }

/* Fluid spacing utilities — scale with viewport */
.u-mt-fluid-xs { margin-top: var(--gap-fluid-xs) !important; }
.u-mt-fluid-sm { margin-top: var(--gap-fluid-sm) !important; }
.u-mt-fluid-md { margin-top: var(--gap-fluid-md) !important; }
.u-mt-fluid-lg { margin-top: var(--gap-fluid-lg) !important; }
.u-mt-fluid-xl { margin-top: var(--gap-fluid-xl) !important; }

.u-mb-fluid-xs { margin-bottom: var(--gap-fluid-xs) !important; }
.u-mb-fluid-sm { margin-bottom: var(--gap-fluid-sm) !important; }
.u-mb-fluid-md { margin-bottom: var(--gap-fluid-md) !important; }
.u-mb-fluid-lg { margin-bottom: var(--gap-fluid-lg) !important; }
.u-mb-fluid-xl { margin-bottom: var(--gap-fluid-xl) !important; }