/* ============================================================================
 * Design System — Utilities
 * Helpers que Bootstrap no cubre y aliases para uso interno.
 * ============================================================================ */

/* Surface variants */
.ds-surface       { background-color: var(--ds-bg-surface); }
.ds-surface-muted { background-color: var(--ds-bg-muted); }
.ds-surface-page  { background-color: var(--ds-bg-page); }

/* Borders */
.ds-border        { border: 1px solid var(--ds-border); }
.ds-border-top    { border-top: 1px solid var(--ds-border); }
.ds-border-bottom { border-bottom: 1px solid var(--ds-border); }

/* Radius */
.ds-rounded-sm { border-radius: var(--ds-radius-sm); }
.ds-rounded-md { border-radius: var(--ds-radius-md); }
.ds-rounded-lg { border-radius: var(--ds-radius-lg); }

/* Shadow */
.ds-shadow-xs { box-shadow: var(--ds-shadow-xs); }
.ds-shadow-sm { box-shadow: var(--ds-shadow-sm); }
.ds-shadow-md { box-shadow: var(--ds-shadow-md); }
.ds-shadow-lg { box-shadow: var(--ds-shadow-lg); }

/* Stack helpers (vertical and horizontal flex with gap) */
.ds-stack    { display: flex; flex-direction: column; }
.ds-stack-h  { display: flex; align-items: center; }
.ds-gap-1 { gap: 4px; }
.ds-gap-2 { gap: 8px; }
.ds-gap-3 { gap: 12px; }
.ds-gap-4 { gap: 16px; }
.ds-gap-5 { gap: 20px; }
.ds-gap-6 { gap: 24px; }

/* Semantic aliases — mirror Tailwind's t-shirt scale so templates can use
   names instead of magic numbers. ``xs`` is intentionally smaller than the
   numeric range starts at. */
.ds-gap-xs { gap: 4px; }
.ds-gap-sm { gap: 8px; }
.ds-gap-md { gap: 16px; }
.ds-gap-lg { gap: 24px; }
.ds-gap-xl { gap: 32px; }

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

/* Icon sizing helper (for <svg> rendered by template tag) */
.ds-icon-12 { width: 12px; height: 12px; }
.ds-icon-14 { width: 14px; height: 14px; }
.ds-icon-16 { width: 16px; height: 16px; }
.ds-icon-18 { width: 18px; height: 18px; }
.ds-icon-20 { width: 20px; height: 20px; }
.ds-icon-24 { width: 24px; height: 24px; }
.ds-icon-32 { width: 32px; height: 32px; }

/* Section divider for grouped content */
.ds-section-title {
    font-size: var(--ds-fs-xs);
    font-weight: var(--ds-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ds-text-muted);
    margin: 24px 0 8px;
}