/* ==========================================================
   UTILITIES
   Single-purpose helpers. Prefer layout/components when
   structure needs more than one declaration.
   ========================================================== */

/* ---------- Display ---------- */

.u-block       { display: block !important; }
.u-inline      { display: inline !important; }
.u-inline-flex { display: inline-flex !important; }
.u-flex        { display: flex !important; }
.u-grid        { display: grid !important; }
.u-none        { display: none !important; }
.u-contents    { display: contents !important; }

/* ---------- Flex helpers ---------- */

.u-flex-col    { flex-direction: column !important; }
.u-flex-wrap   { flex-wrap: wrap !important; }
.u-items-start { align-items: flex-start !important; }
.u-items-center{ align-items: center !important; }
.u-items-end   { align-items: flex-end !important; }
.u-justify-start   { justify-content: flex-start !important; }
.u-justify-center  { justify-content: center !important; }
.u-justify-between { justify-content: space-between !important; }
.u-justify-end     { justify-content: flex-end !important; }
.u-flex-1      { flex: 1 1 auto !important; }
.u-flex-none   { flex: none !important; }
.u-gap-2       { gap: var(--space-2) !important; }
.u-gap-3       { gap: var(--space-3) !important; }
.u-gap-4       { gap: var(--space-4) !important; }
.u-gap-5       { gap: var(--space-5) !important; }
.u-gap-6       { gap: var(--space-6) !important; }

/* ---------- Sizing ---------- */

.u-w-full  { width: 100% !important; }
.u-h-full  { height: 100% !important; }
.u-min-w-0 { min-width: 0 !important; }
.u-max-w-prose { max-width: 70ch !important; }
.u-max-w-narrow { max-width: var(--container-narrow) !important; }

/* ---------- Spacing — margin ---------- */

.u-m-0  { margin: 0 !important; }
.u-mt-0 { margin-top: 0 !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-ml-0 { margin-left: 0 !important; }
.u-mr-0 { margin-right: 0 !important; }

.u-mt-2 { margin-top: var(--space-2) !important; }
.u-mt-3 { margin-top: var(--space-3) !important; }
.u-mt-4 { margin-top: var(--space-4) !important; }
.u-mt-5 { margin-top: var(--space-5) !important; }
.u-mt-6 { margin-top: var(--space-6) !important; }
.u-mt-7 { margin-top: var(--space-7) !important; }
.u-mt-8 { margin-top: var(--space-8) !important; }

.u-mb-2 { margin-bottom: var(--space-2) !important; }
.u-mb-3 { margin-bottom: var(--space-3) !important; }
.u-mb-4 { margin-bottom: var(--space-4) !important; }
.u-mb-5 { margin-bottom: var(--space-5) !important; }
.u-mb-6 { margin-bottom: var(--space-6) !important; }
.u-mb-7 { margin-bottom: var(--space-7) !important; }
.u-mb-8 { margin-bottom: var(--space-8) !important; }

.u-mx-auto { margin-inline: auto !important; }
.u-my-0    { margin-block: 0 !important; }

/* ---------- Spacing — padding ---------- */

.u-p-0  { padding: 0 !important; }
.u-p-4  { padding: var(--space-4) !important; }
.u-p-5  { padding: var(--space-5) !important; }
.u-p-6  { padding: var(--space-6) !important; }

.u-px-0 { padding-inline: 0 !important; }
.u-py-0 { padding-block: 0 !important; }
.u-px-4 { padding-inline: var(--space-4) !important; }
.u-py-4 { padding-block: var(--space-4) !important; }
.u-px-5 { padding-inline: var(--space-5) !important; }
.u-py-5 { padding-block: var(--space-5) !important; }

/* ---------- Typography ---------- */

.u-text-left    { text-align: left !important; }
.u-text-center  { text-align: center !important; }
.u-text-right   { text-align: right !important; }

.u-text-xs  { font-size: var(--font-size-xs) !important; }
.u-text-sm  { font-size: var(--font-size-sm) !important; }
.u-text-md  { font-size: var(--font-size-md) !important; }
.u-text-lg  { font-size: var(--font-size-lg) !important; }
.u-text-xl  { font-size: var(--font-size-xl) !important; }
.u-text-2xl { font-size: var(--font-size-2xl) !important; }

.u-font-heading { font-family: var(--font-heading) !important; }
.u-font-body    { font-family: var(--font-body) !important; }

.u-font-normal   { font-weight: var(--font-weight-normal) !important; }
.u-font-medium   { font-weight: var(--font-weight-medium) !important; }
.u-font-semibold { font-weight: var(--font-weight-semibold) !important; }
.u-font-bold     { font-weight: var(--font-weight-bold) !important; }

.u-leading-tight { line-height: var(--line-height-tight) !important; }
.u-leading-normal{ line-height: var(--line-height) !important; }

.u-uppercase {
    text-transform: uppercase !important;
    letter-spacing: var(--letter-spacing-wide) !important;
}

.u-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.u-balance { text-wrap: balance !important; }

/* ---------- Color ---------- */

.u-color-heading { color: var(--color-heading) !important; }
.u-color-text    { color: var(--color-text) !important; }
.u-color-muted   { color: var(--color-text-light) !important; }
.u-color-accent  { color: var(--color-accent) !important; }
.u-color-primary { color: var(--color-primary) !important; }
.u-color-inverse { color: var(--color-inverse) !important; }
.u-color-success { color: var(--color-success) !important; }
.u-color-danger  { color: var(--color-danger) !important; }

.u-bg-white      { background-color: var(--color-white) !important; }
.u-bg-off-white  { background-color: var(--color-off-white) !important; }
.u-bg-light      { background-color: var(--color-light) !important; }
.u-bg-primary    { background-color: var(--color-primary) !important; }
.u-bg-accent-soft{ background-color: var(--color-accent-soft) !important; }

/* ---------- Borders & Radius ---------- */

.u-rounded-sm   { border-radius: var(--radius-sm) !important; }
.u-rounded-md   { border-radius: var(--radius-md) !important; }
.u-rounded-lg   { border-radius: var(--radius-lg) !important; }
.u-rounded-xl   { border-radius: var(--radius-xl) !important; }
.u-rounded-pill { border-radius: var(--radius-pill) !important; }
.u-rounded-none { border-radius: 0 !important; }

.u-border       { border: var(--border-width) solid var(--color-border) !important; }
.u-border-0     { border: 0 !important; }

.u-shadow-sm    { box-shadow: var(--shadow-sm) !important; }
.u-shadow-md    { box-shadow: var(--shadow-md) !important; }
.u-shadow-lg    { box-shadow: var(--shadow-lg) !important; }
.u-shadow-none  { box-shadow: none !important; }

/* ---------- Position ---------- */

.u-relative { position: relative !important; }
.u-absolute { position: absolute !important; }
.u-sticky   { position: sticky !important; }
.u-fixed    { position: fixed !important; }

.u-inset-0 {
    inset: 0 !important;
}

.u-z-1    { z-index: var(--z-base) !important; }
.u-z-header { z-index: var(--z-header) !important; }

/* ---------- Overflow ---------- */

.u-overflow-hidden { overflow: hidden !important; }
.u-overflow-auto   { overflow: auto !important; }

/* ---------- Object fit ---------- */

.u-object-cover { object-fit: cover !important; }
.u-object-contain { object-fit: contain !important; }

/* ---------- Interaction ---------- */

.u-pointer     { cursor: pointer !important; }
.u-no-pointer  { pointer-events: none !important; }
.u-select-none { user-select: none !important; }

/* ---------- Visibility ---------- */

.u-invisible { visibility: hidden !important; }
.u-visible   { visibility: visible !important; }
.u-opacity-0 { opacity: 0 !important; }
.u-opacity-100 { opacity: 1 !important; }

/* ---------- Lists ---------- */

.u-list-disc {
    list-style: disc !important;
    padding-left: 1.25em !important;
}

.u-list-decimal {
    list-style: decimal !important;
    padding-left: 1.25em !important;
}

.u-list-none {
    list-style: none !important;
    padding-left: 0 !important;
}

/* ---------- Motion — prefer .reveal in sections.css ---------- */

.u-fade-in {
    /* Alias kept for compatibility; homepage uses .reveal */
}

.js .u-fade-in {
    opacity: 0;
    transform: translateY(var(--fade-distance));
    transition:
        opacity var(--fade-duration) var(--ease-out),
        transform var(--fade-duration) var(--ease-out);
}

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

@media (prefers-reduced-motion: reduce) {
    .js .u-fade-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ---------- Aspect ---------- */

.u-aspect-video { aspect-ratio: 16 / 9 !important; }
.u-aspect-square { aspect-ratio: 1 / 1 !important; }