/*
 * Small, focused utility classes. "Tailwind-lite" covering the 30 or so
 * one-off primitives we actually reach for, without the build step.
 *
 * Currently unlayered so they win on source-order ties against existing
 * unlayered component CSS. Once the project migrates component stylesheets
 * into `@layer components { ... }`, move this whole file into
 * `@layer utilities { ... }` to restore strict cascade control.
 *
 * Prefix: u-*  (for "utility") — keeps them visually distinct from
 * app-* component classes.
 */

/* ── Layout ────────────────────────────────────────────────────────── */
.u-block        { display: block; }
.u-inline       { display: inline; }
.u-inline-block { display: inline-block; }
.u-flex         { display: flex; }
.u-inline-flex  { display: inline-flex; }
.u-grid         { display: grid; }
.u-hidden       { display: none; }

.u-flex-row     { flex-direction: row; }
.u-flex-col     { flex-direction: column; }
.u-flex-wrap    { flex-wrap: wrap; }
.u-flex-nowrap  { flex-wrap: nowrap; }
.u-flex-1       { flex: 1 1 0%; }
.u-flex-auto    { flex: 1 1 auto; }
.u-flex-none    { flex: none; }

.u-items-start    { align-items: flex-start; }
.u-items-center   { align-items: center; }
.u-items-end      { align-items: flex-end; }
.u-items-stretch  { align-items: stretch; }
.u-items-baseline { align-items: baseline; }

.u-justify-start    { justify-content: flex-start; }
.u-justify-center   { justify-content: center; }
.u-justify-end      { justify-content: flex-end; }
.u-justify-between  { justify-content: space-between; }
.u-justify-around   { justify-content: space-around; }

/* ── Gap / spacing between flex and grid children ─────────────────── */
.u-gap-0 { gap: var(--app-space-0); }
.u-gap-1 { gap: var(--app-space-1); }
.u-gap-2 { gap: var(--app-space-2); }
.u-gap-3 { gap: var(--app-space-3); }
.u-gap-4 { gap: var(--app-space-4); }
.u-gap-6 { gap: var(--app-space-6); }
.u-gap-8 { gap: var(--app-space-8); }

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

.u-px-2 { padding-left: var(--app-space-2); padding-right: var(--app-space-2); }
.u-px-3 { padding-left: var(--app-space-3); padding-right: var(--app-space-3); }
.u-px-4 { padding-left: var(--app-space-4); padding-right: var(--app-space-4); }
.u-py-1 { padding-top: var(--app-space-1); padding-bottom: var(--app-space-1); }
.u-py-2 { padding-top: var(--app-space-2); padding-bottom: var(--app-space-2); }
.u-py-3 { padding-top: var(--app-space-3); padding-bottom: var(--app-space-3); }
.u-py-4 { padding-top: var(--app-space-4); padding-bottom: var(--app-space-4); }

/* ── Margin ───────────────────────────────────────────────────────── */
.u-m-0    { margin: 0; }
.u-mt-2   { margin-top: var(--app-space-2); }
.u-mt-4   { margin-top: var(--app-space-4); }
.u-mt-6   { margin-top: var(--app-space-6); }
.u-mb-2   { margin-bottom: var(--app-space-2); }
.u-mb-4   { margin-bottom: var(--app-space-4); }
.u-mb-6   { margin-bottom: var(--app-space-6); }
.u-mx-auto { margin-left: auto; margin-right: auto; }

/* ── Text ─────────────────────────────────────────────────────────── */
.u-text-left   { text-align: left; }
.u-text-center { text-align: center; }
.u-text-right  { text-align: right; }

.u-text-xs     { font-size: var(--app-font-xsmall); }
.u-text-sm     { font-size: var(--app-font-small); }
.u-text-base   { font-size: var(--app-font-medium); }
.u-text-lg     { font-size: var(--app-font-large); }
.u-text-xl     { font-size: var(--app-font-xlarge); }

.u-font-normal { font-weight: 400; }
.u-font-medium { font-weight: 500; }
.u-font-semibold { font-weight: 600; }
.u-font-bold   { font-weight: 700; }

.u-text-muted  { color: var(--app-text-color-muted); }
.u-text-brand  { color: var(--app-brand-color); }

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

/* ── Surfaces / borders ───────────────────────────────────────────── */
.u-rounded-none { border-radius: var(--app-radius-none); }
.u-rounded-sm   { border-radius: var(--app-radius-sm); }
.u-rounded-md   { border-radius: var(--app-radius-md); }
.u-rounded-lg   { border-radius: var(--app-radius-lg); }
.u-rounded-full { border-radius: var(--app-radius-full); }

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

.u-bg-surface     { background: var(--app-background-color); }
.u-bg-surface-alt { background: var(--app-section-background-color); }

/* ── Width helpers ────────────────────────────────────────────────── */
.u-w-full  { width: 100%; }
.u-w-auto  { width: auto; }
.u-max-w-screen-sm { max-width: 640px; }
.u-max-w-screen-md { max-width: 768px; }
.u-max-w-screen-lg { max-width: 1024px; }

/* ── Accessibility ────────────────────────────────────────────────── */
.u-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}