/* ==========================================================================
   QRA Design System — utilities (.u-*)
   Hand-written, token-derived atomic classes for ONE-OFF adjustments only.
   Rule of thumb: 3+ uses of a pattern → make it a .qra-* component instead.
   Load LAST (after each page's stylesheet) so one-off overrides win — they
   replace inline styles that previously had top specificity.
   NO framework, NO build step: this file is curated by hand, not generated.
   ========================================================================== */

/* ---------------- Spacing · padding (→ --space-*) ---------------- */
.u-p-0{padding:var(--space-0);}   .u-p-1{padding:var(--space-1);}   .u-p-2{padding:var(--space-2);}
.u-p-3{padding:var(--space-3);}   .u-p-4{padding:var(--space-4);}   .u-p-5{padding:var(--space-5);}
.u-p-6{padding:var(--space-6);}   .u-p-7{padding:var(--space-7);}   .u-p-8{padding:var(--space-8);}   .u-p-9{padding:var(--space-9);}

.u-px-2{padding-left:var(--space-2);padding-right:var(--space-2);}
.u-px-3{padding-left:var(--space-3);padding-right:var(--space-3);}
.u-px-4{padding-left:var(--space-4);padding-right:var(--space-4);}
.u-px-5{padding-left:var(--space-5);padding-right:var(--space-5);}
.u-px-6{padding-left:var(--space-6);padding-right:var(--space-6);}
.u-py-2{padding-top:var(--space-2);padding-bottom:var(--space-2);}
.u-py-3{padding-top:var(--space-3);padding-bottom:var(--space-3);}
.u-py-4{padding-top:var(--space-4);padding-bottom:var(--space-4);}
.u-py-5{padding-top:var(--space-5);padding-bottom:var(--space-5);}
.u-py-6{padding-top:var(--space-6);padding-bottom:var(--space-6);}
.u-py-7{padding-top:var(--space-7);padding-bottom:var(--space-7);}
.u-py-8{padding-top:var(--space-8);padding-bottom:var(--space-8);}

.u-pt-2{padding-top:var(--space-2);}   .u-pt-4{padding-top:var(--space-4);}   .u-pt-6{padding-top:var(--space-6);}
.u-pb-2{padding-bottom:var(--space-2);}.u-pb-4{padding-bottom:var(--space-4);}.u-pb-6{padding-bottom:var(--space-6);}

/* ---------------- Spacing · margin (→ --space-*) ---------------- */
.u-m-0{margin:var(--space-0);}   .u-m-auto{margin:0 auto;}
.u-mt-1{margin-top:var(--space-1);}.u-mt-2{margin-top:var(--space-2);}.u-mt-3{margin-top:var(--space-3);}
.u-mt-4{margin-top:var(--space-4);}.u-mt-5{margin-top:var(--space-5);}.u-mt-6{margin-top:var(--space-6);}
.u-mt-7{margin-top:var(--space-7);}.u-mt-8{margin-top:var(--space-8);}
.u-mb-1{margin-bottom:var(--space-1);}.u-mb-2{margin-bottom:var(--space-2);}.u-mb-3{margin-bottom:var(--space-3);}
.u-mb-4{margin-bottom:var(--space-4);}.u-mb-5{margin-bottom:var(--space-5);}.u-mb-6{margin-bottom:var(--space-6);}
.u-mb-7{margin-bottom:var(--space-7);}.u-mb-8{margin-bottom:var(--space-8);}

/* ---------------- Gap (→ --space-*) ---------------- */
.u-gap-1{gap:var(--space-1);}.u-gap-2{gap:var(--space-2);}.u-gap-3{gap:var(--space-3);}
.u-gap-4{gap:var(--space-4);}.u-gap-5{gap:var(--space-5);}.u-gap-6{gap:var(--space-6);}
.u-gap-7{gap:var(--space-7);}.u-gap-8{gap:var(--space-8);}

/* ---------------- Radius (→ --radius-*) ---------------- */
.u-radius-sm{border-radius:var(--radius-sm);}   .u-radius-md{border-radius:var(--radius-md);}
.u-radius-lg{border-radius:var(--radius-lg);}   .u-radius-xl{border-radius:var(--radius-xl);}
.u-radius-2xl{border-radius:var(--radius-2xl);} .u-radius-3xl{border-radius:var(--radius-3xl);}
.u-radius-full{border-radius:var(--radius-full);}

/* ---------------- Elevation (→ --shadow-*) ---------------- */
.u-shadow-card{box-shadow:var(--shadow-card);}
.u-shadow-raise{box-shadow:var(--shadow-raise);}
.u-shadow-lift{box-shadow:var(--shadow-lift);}
.u-shadow-none{box-shadow:none;}

/* ---------------- Text color (→ semantic aliases) ---------------- */
.u-text-strong{color:var(--text-strong);}   .u-text-body{color:var(--text-body);}
.u-text-muted{color:var(--text-muted);}      .u-text-subtle{color:var(--text-subtle);}
.u-text-brand{color:var(--brand);}           .u-text-on-brand{color:var(--text-on-brand);}
.u-text-secondary{color:var(--secondary-400);}

/* ---------------- Background (→ surfaces / brand / ink) ---------------- */
.u-bg-surface-0{background:var(--surface-0);}   .u-bg-surface-1{background:var(--surface-1);}
.u-bg-surface-2{background:var(--surface-2);}   .u-bg-brand{background:var(--brand);}
.u-bg-brand-soft{background:var(--surface-brand-soft);}
.u-bg-secondary{background:var(--secondary-400);}
.u-bg-secondary-soft{background:var(--surface-secondary-soft);}
.u-bg-ink-800{background:var(--ink-800);}       .u-bg-ink-900{background:var(--ink-900);}

/* ---------------- Border (→ --border-*) ---------------- */
.u-border{border:1px solid var(--border-default);}
.u-border-strong{border:1px solid var(--border-strong);}
.u-border-hairline{border:1px solid var(--border-hairline);}
.u-border-0{border:none;}

/* ---------------- Font family / weight ---------------- */
.u-font-display{font-family:var(--font-display);}
.u-font-body{font-family:var(--font-body);}
.u-font-mono{font-family:var(--font-mono);}
.u-fw-regular{font-weight:var(--weight-regular);}   .u-fw-medium{font-weight:var(--weight-medium);}
.u-fw-semibold{font-weight:var(--weight-semibold);} .u-fw-bold{font-weight:var(--weight-bold);}

/* ---------------- Font size · fixed scale (→ --text-*) ---------------- */
.u-fs-2xs{font-size:var(--text-2xs);}   .u-fs-xs{font-size:var(--text-xs);}   .u-fs-sm{font-size:var(--text-sm);}
.u-fs-base{font-size:var(--text-base);} .u-fs-md{font-size:var(--text-md);}   .u-fs-lg{font-size:var(--text-lg);}
.u-fs-xl{font-size:var(--text-xl);}     .u-fs-2xl{font-size:var(--text-2xl);} .u-fs-3xl{font-size:var(--text-3xl);}
.u-fs-4xl{font-size:var(--text-4xl);}   .u-fs-5xl{font-size:var(--text-5xl);}

/* ---------------- Font size · fluid display (→ --display-*) ---------------- */
.u-display-xs{font-size:var(--display-xs);}   .u-display-sm{font-size:var(--display-sm);}
.u-display-md{font-size:var(--display-md);}   .u-display-lg{font-size:var(--display-lg);}
.u-display-xl{font-size:var(--display-xl);}   .u-display-2xl{font-size:var(--display-2xl);}
.u-display-numeral{font-size:var(--display-numeral);}

/* ---------------- Line height (→ --leading-*) ---------------- */
.u-leading-none{line-height:var(--leading-none);}   .u-leading-tight{line-height:var(--leading-tight);}
.u-leading-snug{line-height:var(--leading-snug);}   .u-leading-normal{line-height:var(--leading-normal);}
.u-leading-relaxed{line-height:var(--leading-relaxed);}

/* ---------------- Letter spacing (→ --tracking-*) ---------------- */
.u-tracking-tight{letter-spacing:var(--tracking-tight);}   .u-tracking-snug{letter-spacing:var(--tracking-snug);}
.u-tracking-body{letter-spacing:var(--tracking-body);}     .u-tracking-button{letter-spacing:var(--tracking-button);}

/* ---------------- Minimal layout helpers (one-offs only) ---------------- */
.u-flex{display:flex;}   .u-inline-flex{display:inline-flex;}   .u-grid{display:grid;}
.u-block{display:block;} .u-hidden{display:none;}
.u-flex-col{flex-direction:column;}   .u-flex-wrap{flex-wrap:wrap;}
.u-items-center{align-items:center;}  .u-items-start{align-items:flex-start;}   .u-items-end{align-items:flex-end;}
.u-justify-center{justify-content:center;}   .u-justify-between{justify-content:space-between;}
.u-text-center{text-align:center;}    .u-text-left{text-align:left;}   .u-text-right{text-align:right;}
.u-w-full{width:100%;}   .u-h-full{height:100%;}

/* ---------------- Responsive visibility (the ONLY breakpoint-aware utilities) ----
   Deliberately three classes and no more. A layout that changes *shape* at a
   breakpoint is a component and belongs in a .qra-* / page rule with its own
   media query — not a per-breakpoint utility grammar. Breakpoints: tokens.css. */
.u-hide-md{}   /* hidden at/below --bp-lg 1024 */
.u-hide-sm{}   /* hidden at/below --bp-md  768 */
.u-only-sm{}   /* shown ONLY at/below --bp-md 768 */
@media(max-width:1023px){ .u-hide-md{display:none !important;} }
@media(max-width:767px){  .u-hide-sm{display:none !important;} }
@media(min-width:768px){  .u-only-sm{display:none !important;} }