/* ============================================================
   utilities.css — Chedders DNA V3
   Helpers · Spacing · Animation Base · Layout Helpers
   ============================================================ */

/* ──────────────────────────────────────────
   SECTION PADDING — V3 §5.2 Tier model
────────────────────────────────────────── */

.section-padding     { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.section-padding--sm { padding-top: var(--space-xl);  padding-bottom: var(--space-xl);  }
.section-padding--lg { padding-top: 120px;             padding-bottom: 120px;            }

/* ──────────────────────────────────────────
   BACKGROUNDS
────────────────────────────────────────── */

.bg-surface       { background-color: var(--surface); }
.bg-surface-2     { background-color: var(--surface-2); }
.bg-primary-brand { background-color: var(--primary); }

/* ──────────────────────────────────────────
   TEXT HELPERS
────────────────────────────────────────── */

.text-muted-custom   { color: var(--muted)   !important; transition: color var(--transition-base); }
.text-accent-custom  { color: var(--accent)  !important; }
.text-primary-custom { color: var(--primary) !important; }

/* ──────────────────────────────────────────
   SECTION LABEL — V3 §3.3: 11px · 700 · 0.12em
────────────────────────────────────────── */

.section-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;            /* V3 specifies 700, not 600 */
  letter-spacing: 0.12em;      /* V3 specifies 0.12em */
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
  transition: color var(--transition-base);
}

/* ──────────────────────────────────────────
   SECTION HEADING & SUBTEXT
────────────────────────────────────────── */

.section-heading {
  color: var(--text);
  margin-bottom: 16px;
  transition: color var(--transition-base);
}

.section-subtext {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
  max-width: 560px;
  transition: color var(--transition-base);
}

/* ──────────────────────────────────────────
   DIVIDER
────────────────────────────────────────── */

.divider {
  width: 36px;
  height: 3px;
  background-color: var(--accent);
  border-radius: 2px;
  margin-bottom: 24px;
  transition: background-color var(--transition-base);
}

/* ──────────────────────────────────────────
   FLEX HELPERS
────────────────────────────────────────── */

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

/* ──────────────────────────────────────────
   CONTENT WIDTH CONSTRAINTS
────────────────────────────────────────── */

.content-width--narrow { max-width: 540px; }
.content-width--medium { max-width: 720px; }
.content-width--wide   { max-width: 960px; }

/* ──────────────────────────────────────────
   FADE-IN-UP ANIMATION — V3 §9 canonical
   Class: .fade-in-up   Toggle: .is-visible
   Stagger: .stagger-group + JS 75ms increments
────────────────────────────────────────── */

.fade-in-up {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
  will-change: opacity, transform;
}

.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger group — JS sets transitionDelay on each child */
.stagger-group > .fade-in-up { transition-delay: 0ms; } /* JS overrides this */

/* ──────────────────────────────────────────
   ACCESSIBILITY
────────────────────────────────────────── */

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ──────────────────────────────────────────
   SPACING UTILITIES
────────────────────────────────────────── */

.gap-tight  { gap: var(--space-md) !important; }
.gap-normal { gap: var(--space-lg) !important; }
.gap-loose  { gap: 40px !important; }