/* ============================================================
   UTILITIES — Spacing, Flex, Text Helpers
   ============================================================ */

/* --- Margin --- */
.m-0  { margin: 0; }
.m-1  { margin: var(--space-1); }
.m-2  { margin: var(--space-2); }
.m-3  { margin: var(--space-3); }
.m-4  { margin: var(--space-4); }
.m-6  { margin: var(--space-6); }
.m-8  { margin: var(--space-8); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

/* --- Padding --- */
.p-0  { padding: 0; }
.p-1  { padding: var(--space-1); }
.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }

.py-2  { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3  { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-6  { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8  { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }

/* --- Flex helpers --- */
.d-flex           { display: flex; }
.flex-column      { flex-direction: column; }
.align-items-center  { align-items: center; }
.align-items-start   { align-items: flex-start; }
.align-items-end     { align-items: flex-end; }
.justify-between  { justify-content: space-between; }
.justify-end      { justify-content: flex-end; }
.justify-center   { justify-content: center; }
.gap-1            { gap: var(--space-1); }
.gap-2            { gap: var(--space-2); }
.gap-3            { gap: var(--space-3); }
.gap-4            { gap: var(--space-4); }
.flex-wrap        { flex-wrap: wrap; }

/* --- Text helpers --- */
.text-muted   { color: var(--text-muted); }
.text-error   { color: var(--error); }
.text-sm      { font-size: 0.875rem; }
.text-xs      { font-size: 0.75rem; }
.font-serif   { font-family: var(--font-serif); }
.font-medium  { font-weight: 500; }
.font-bold    { font-weight: 700; }
.text-center  { text-align: center; }
.small        { font-size: 0.875rem; color: var(--text-muted); }

/* --- Width helpers --- */
.w-full { width: 100%; }

/* --- Flex align shorthand --- */
.align-center { align-items: center; }

/* --- Accessibility: visually hidden but available to screen readers --- */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: 1000;
    transform: translateY(-150%);
    padding: var(--space-2) var(--space-3);
    background: var(--primary);
    color: var(--bg-surface);
    border-radius: var(--radius-sm);
    transition: transform var(--transition);
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}