/* =============================================================
   UTILITIES  —  small, reusable, token-driven helpers
   -------------------------------------------------------------
   Opt-in classes for new markup. Kept minimal to avoid bloat;
   grow only as real needs appear.
   ============================================================= */

/* Surface + elevation helpers */
.ds-surface   { background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius-large); }
.ds-shadow-sm { box-shadow: var(--shadow-small); }
.ds-shadow-md { box-shadow: var(--shadow-medium); }
.ds-shadow-lg { box-shadow: var(--shadow-large); }

/* Radius helpers */
.ds-rounded-sm { border-radius: var(--radius-small); }
.ds-rounded    { border-radius: var(--radius-medium); }
.ds-rounded-lg { border-radius: var(--radius-large); }
.ds-rounded-pill { border-radius: var(--radius-pill); }

/* Text tokens */
.ds-text-primary   { color: var(--text-primary); }
.ds-text-secondary { color: var(--text-secondary); }
.ds-text-muted     { color: var(--text-muted); }
.ds-text-gold      { color: var(--gold-dark); }

/* Accent backgrounds */
.ds-bg-primary-soft { background: var(--primary-soft); }
.ds-bg-gold-soft    { background: var(--gold-soft); }
.ds-bg-surface-2    { background: var(--surface-2); }

/* Interactive lift on hover (for custom cards/links) */
.ds-lift { transition: transform var(--animation-speed) var(--ease), box-shadow var(--animation-speed) var(--ease); }
.ds-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-large); }