/* ============================================================
   utilities.css — the u-* utility system.
   Convention (documented on /styles):
     u-text-*     typography roles (map 1:1 to the type ramp)
     u-font-*     font family
     u-color-*    text colour
     u-bg-*       background colour
     u-surface-*  surface presets (bg + radius)
     u-radius-*   border radius
     u-pad-* / u-gap-* / u-mt-*  spacing (Figma space/* scale)
     u-container / u-grid / u-column   layout scaffolding
   AI applies these classes; it never invents ad-hoc ones that
   break the system or the JS hooks.
   ============================================================ */

/* ---------- layout scaffolding ---------- */
.u-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}
.u-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--container-gutter);
}
.u-column { grid-column: span 12; }
.u-span-3 { grid-column: span 3; }
.u-span-4 { grid-column: span 4; }
.u-span-5 { grid-column: span 5; }
.u-span-6 { grid-column: span 6; }
.u-span-7 { grid-column: span 7; }
.u-span-8 { grid-column: span 8; }

.u-flex { display: flex; }
.u-flex-col { display: flex; flex-direction: column; }
.u-items-center { align-items: center; }
.u-justify-between { justify-content: space-between; }
.u-wrap { flex-wrap: wrap; }

/* ---------- typography roles (1:1 with type ramp) ---------- */
.u-text-h1 { font-family: var(--font-display); font-weight: var(--t-h1-weight); font-size: var(--t-h1-size); line-height: var(--t-h1-lh); letter-spacing: var(--t-h1-ls); }
.u-text-h2 { font-family: var(--font-display); font-weight: var(--t-h2-weight); font-size: var(--t-h2-size); line-height: var(--t-h2-lh); letter-spacing: var(--t-h2-ls); }
.u-text-h3 { font-family: var(--font-display); font-weight: var(--t-h3-weight); font-size: var(--t-h3-size); line-height: var(--t-h3-lh); letter-spacing: var(--t-h3-ls); }
.u-text-h4 { font-family: var(--font-display); font-weight: var(--t-h4-weight); font-size: var(--t-h4-size); line-height: var(--t-h4-lh); letter-spacing: var(--t-h4-ls); }
.u-text-h5 { font-family: var(--font-display); font-weight: var(--t-h5-weight); font-size: var(--t-h5-size); line-height: var(--t-h5-lh); letter-spacing: var(--t-h5-ls); }
.u-text-stat { font-family: var(--font-display); font-weight: var(--t-stat-weight); font-size: var(--t-stat-size); line-height: var(--t-stat-lh); letter-spacing: var(--t-stat-ls); }
.u-text-nav { font-family: var(--font-display); font-weight: var(--t-nav-weight); font-size: var(--t-nav-size); line-height: var(--t-nav-lh); letter-spacing: var(--t-nav-ls); }
.u-text-body-lg { font-family: var(--font-sans); font-weight: var(--t-bodylg-weight); font-size: var(--t-bodylg-size); line-height: var(--t-bodylg-lh); }
.u-text-body { font-family: var(--font-sans); font-weight: var(--t-body-weight); font-size: var(--t-body-size); line-height: var(--t-body-lh); }
.u-text-body-s { font-family: var(--font-sans); font-weight: var(--t-bodys-weight); font-size: var(--t-bodys-size); line-height: var(--t-bodys-lh); }
.u-text-bold { font-family: var(--font-sans); font-weight: var(--t-bold-weight); font-size: var(--t-bold-size); line-height: var(--t-bold-lh); }
.u-text-eyebrow { font-family: var(--font-sans); font-weight: var(--t-eyebrow-weight); font-size: var(--t-eyebrow-size); line-height: var(--t-eyebrow-lh); letter-spacing: var(--t-eyebrow-ls); text-transform: uppercase; }
.u-text-caption { font-family: var(--font-sans); font-weight: var(--t-caption-weight); font-size: var(--t-caption-size); line-height: var(--t-caption-lh); }

/* ---------- colour ---------- */
.u-color-primary { color: var(--text-primary); }
.u-color-secondary { color: var(--text-secondary); }
.u-color-soft { color: var(--text-soft); }
.u-color-accent { color: var(--accent); }
.u-color-cabaret { color: var(--brand-cabaret); }
.u-color-white { color: var(--surface-white); }
.u-color-gradient {   /* brand gradient text fill (pomegranate → cabaret) */
  background: linear-gradient(171deg, var(--brand-pomegranate) 0%, var(--brand-cabaret) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- background / surface ---------- */
.u-bg-canvas { background: var(--canvas); }
.u-bg-card { background: var(--surface-card); }
.u-bg-alt { background: var(--surface-alt); }
.u-bg-white { background: var(--surface-white); }
.u-bg-accent { background: var(--accent); }
.u-bg-accent-soft { background: var(--accent-soft); }

.u-surface-card { background: var(--surface-card); border: var(--bw-1) solid var(--border); border-radius: var(--radius-card); }
.u-surface-alt  { background: var(--surface-alt);  border-radius: var(--radius-card); }

/* ---------- radius ---------- */
.u-radius-sm { border-radius: var(--radius-sm); }
.u-radius-card { border-radius: var(--radius-card); }
.u-radius-pill { border-radius: var(--radius-pill); }

/* ---------- spacing (Figma space/* scale) ---------- */
.u-pad-16 { padding: var(--space-16); }
.u-pad-24 { padding: var(--space-24); }
.u-pad-32 { padding: var(--space-32); }
.u-gap-6 { gap: var(--space-6); }
.u-gap-8 { gap: var(--space-8); }
.u-gap-12 { gap: var(--space-12); }
.u-gap-16 { gap: var(--space-16); }
.u-gap-24 { gap: var(--space-24); }
.u-gap-32 { gap: var(--space-32); }
.u-mt-8 { margin-top: var(--space-8); }
.u-mt-16 { margin-top: var(--space-16); }
.u-mt-24 { margin-top: var(--space-24); }
.u-mt-32 { margin-top: var(--space-32); }

/* ---------- section rhythm ---------- */
.u-section { padding-block: var(--space-80); }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  .u-span-3, .u-span-4, .u-span-5, .u-span-6, .u-span-7, .u-span-8 { grid-column: span 12; }
  .u-section { padding-block: var(--space-48); }
}