/* ==========================================================================
   LAYOUT HELPERS + BASE RESET
   Opt-in helper classes are prefixed `ds-` to avoid clashing with consumer CSS
   or Tailwind. Everything here is optional sugar over the tokens.
   ========================================================================== */

/* ---- Container: centered, max-width, responsive gutters ---- */
.ds-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
@media (min-width: 64rem) {
  .ds-container { padding-inline: var(--container-pad-lg); }
}

/* ---- 12-column grid (the reference's structural backbone) ---- */
.ds-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--grid-gutter);
}

/* ---- Section vertical rhythm ---- */
.ds-section { margin-top: var(--section-gap); }
@media (min-width: 64rem) {
  .ds-section { margin-top: var(--section-gap-lg); }
}

/* ---- Reading measure ---- */
.ds-prose { max-width: var(--container-prose); }
.ds-measure-narrow { max-width: var(--container-narrow); }

/* ---- Hairline divider ---- */
.ds-hr {
  border: 0;
  border-top: var(--border-hairline);
  margin: 0;
}

/* ---- Text role helpers ---- */
.ds-eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.ds-muted { color: var(--text-muted); }

/* ---- Base element defaults consumers can rely on ---- */
a { color: var(--foreground); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: opacity var(--duration-fast) var(--ease-out); }
a:hover { opacity: .6; }

::selection { background: var(--accent); color: var(--accent-foreground); }

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}