/* =============================================================================
   DWTC Design System — Utilities Layer
   ---------------------------------------------------------------------------
   Single-property helpers that template.html already uses. Every value comes
   from DS tokens exposed by globals.css / tokens/themes/*.css. No hardcoded
   colors, radii, shadows, or spacing.

   Naming convention: `u-<aspect>-<modifier>` (e.g. `u-mb-md`, `u-color-primary`).
   Scale aliases across the layer:
     xs  → var(--space-1)   (4px)   |  sm → var(--space-2)   (8px)
     md  → var(--space-4)   (16px)  |  lg → var(--space-6)   (24px)
     xl  → var(--space-8)   (32px)  |  2xl → var(--space-12) (48px)

   Load order (see globals.css):
     1. colors.css → 2. typography.css → 3. spacing.css → 4. themes/*
     5. shadows.css → 6. components.css → 7. utilities.css (last wins)
   Utilities are loaded LAST so a `u-*` class always overrides a component
   rule it's placed on.
   ============================================================================= */

/* ── Display ─────────────────────────────────────────────────────────────── */
.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-inline-grid  { display: inline-grid; }
.u-contents     { display: contents; }
.u-hidden       { display: none; }

/* ── Visibility ──────────────────────────────────────────────────────────── */
.u-invisible    { visibility: hidden; }
.u-visible      { visibility: visible; }

/* ── Position ────────────────────────────────────────────────────────────── */
.u-static       { position: static; }
.u-relative     { position: relative; }
.u-absolute     { position: absolute; }
.u-fixed        { position: fixed; }
.u-sticky       { position: sticky; }
.u-sticky-top    { position: sticky; top: 0; z-index: var(--z-sticky, 10); }
.u-sticky-bottom { position: sticky; bottom: 0; z-index: var(--z-sticky, 10); }

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

/* ── Flex direction / wrap ───────────────────────────────────────────────── */
.u-flex-row      { display: flex; flex-direction: row; }
.u-flex-col      { display: flex; flex-direction: column; }
.u-flex-row-rev  { display: flex; flex-direction: row-reverse; }
.u-flex-col-rev  { display: flex; flex-direction: column-reverse; }
.u-flex-wrap     { flex-wrap: wrap; }
.u-flex-nowrap   { flex-wrap: nowrap; }

/* ── Flex grow/shrink ────────────────────────────────────────────────────── */
.u-flex-1       { flex: 1 1 0%; min-width: 0; }
.u-flex-auto    { flex: 1 1 auto; }
.u-flex-initial { flex: 0 1 auto; }
.u-flex-none    { flex: none; }
.u-grow         { flex-grow: 1; }
.u-grow-0       { flex-grow: 0; }
.u-shrink       { flex-shrink: 1; }
.u-shrink-0     { flex-shrink: 0; }

/* ── Align / Justify ─────────────────────────────────────────────────────── */
.u-items-start    { align-items: flex-start; }
.u-items-center   { align-items: center; }
.u-items-end      { align-items: flex-end; }
.u-items-baseline { align-items: baseline; }
.u-items-stretch  { align-items: stretch; }

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

.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; }
.u-justify-evenly  { justify-content: space-evenly; }

/* ── Gap (flex + grid) ───────────────────────────────────────────────────── */
.u-gap-0   { gap: 0; }
.u-gap-xs  { gap: var(--space-1); }
.u-gap-sm  { gap: var(--space-2); }
.u-gap-md  { gap: var(--space-4); }
.u-gap-lg  { gap: var(--space-6); }
.u-gap-xl  { gap: var(--space-8); }

/* ── Composite flex presets (as referenced in template.html) ─────────────── */
.u-flex-col-gap-2xs { display: flex; flex-direction: column; gap: var(--space-0_5); }
.u-flex-col-gap-xs  { display: flex; flex-direction: column; gap: var(--space-1); }
.u-flex-col-gap-sm  { display: flex; flex-direction: column; gap: var(--space-2); }
.u-flex-col-gap-md  { display: flex; flex-direction: column; gap: var(--space-4); }
.u-flex-col-gap-lg  { display: flex; flex-direction: column; gap: var(--space-6); }

.u-flex-col-gap-md-max-420 {
  display: flex; flex-direction: column; gap: var(--space-4);
  max-inline-size: 26.25rem;
}

.u-flex-row-gap-xs         { display: flex; flex-direction: row; gap: var(--space-1); }
.u-flex-row-gap-sm         { display: flex; flex-direction: row; gap: var(--space-2); }
.u-flex-row-gap-md         { display: flex; flex-direction: row; gap: var(--space-4); }
.u-flex-row-gap-lg         { display: flex; flex-direction: row; gap: var(--space-6); }
.u-flex-row-gap-xs-center       { display: flex; flex-direction: row; gap: var(--space-1); align-items: center; }
.u-flex-row-gap-sm-center       { display: flex; flex-direction: row; gap: var(--space-2); align-items: center; }
.u-flex-row-gap-md-center       { display: flex; flex-direction: row; gap: var(--space-4); align-items: center; }
.u-flex-row-gap-xs-wrap         { display: flex; flex-direction: row; gap: var(--space-1); flex-wrap: wrap; }
.u-flex-row-gap-sm-wrap         { display: flex; flex-direction: row; gap: var(--space-2); flex-wrap: wrap; }
.u-flex-row-gap-md-wrap         { display: flex; flex-direction: row; gap: var(--space-4); flex-wrap: wrap; }
.u-flex-row-gap-xs-wrap-center  { display: flex; flex-direction: row; gap: var(--space-1); flex-wrap: wrap; align-items: center; }
.u-flex-row-gap-sm-wrap-center  { display: flex; flex-direction: row; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.u-flex-row-gap-md-wrap-center  { display: flex; flex-direction: row; gap: var(--space-4); flex-wrap: wrap; align-items: center; }

/* ── Grid presets ────────────────────────────────────────────────────────── */
.u-grid-2    { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.u-grid-2-sm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.u-grid-3    { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.u-grid-4    { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.u-grid-auto-fit-200 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr)); gap: var(--space-4); }
.u-grid-auto-fit-220 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13.75rem, 100%), 1fr)); gap: var(--space-4); }
.u-grid-auto-fit-240 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: var(--space-4); }
.u-grid-auto-fit-260 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16.25rem, 100%), 1fr)); gap: var(--space-4); }
.u-grid-auto-fit-280 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 1fr)); gap: var(--space-4); }
.u-grid-auto-fit-320 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: var(--space-4); }
.u-grid-auto-fit-360 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22.5rem, 100%), 1fr)); gap: var(--space-4); }

/* ── Spacing — Margin ────────────────────────────────────────────────────── */
.u-m0  { margin: 0; }
.u-m-xs { margin: var(--space-1); }
.u-m-sm { margin: var(--space-2); }
.u-m-md { margin: var(--space-4); }
.u-m-lg { margin: var(--space-6); }

.u-m-0    { margin: 0; }
.u-mt-0   { margin-block-start: 0; }
.u-mt-xs  { margin-block-start: var(--space-1); }
.u-mt-sm  { margin-block-start: var(--space-2); }
.u-mt-md  { margin-block-start: var(--space-4); }
.u-mt-lg  { margin-block-start: var(--space-6); }
.u-mt-xl  { margin-block-start: var(--space-8); }

.u-mb-0   { margin-block-end: 0; }
.u-mb-xs  { margin-block-end: var(--space-1); }
.u-mb-sm  { margin-block-end: var(--space-2); }
.u-mb-md  { margin-block-end: var(--space-4); }
.u-mb-lg  { margin-block-end: var(--space-6); }
.u-mb-xl  { margin-block-end: var(--space-8); }

/* logical-property aliases */
.u-mbs-0  { margin-block-start: 0; }
.u-mbs-xs { margin-block-start: var(--space-1); }
.u-mbs-sm { margin-block-start: var(--space-2); }
.u-mbs-md { margin-block-start: var(--space-4); }
.u-mbs-lg { margin-block-start: var(--space-6); }

.u-mbe-0  { margin-block-end: 0; }
.u-mbe-xs { margin-block-end: var(--space-1); }
.u-mbe-sm { margin-block-end: var(--space-2); }
.u-mbe-md { margin-block-end: var(--space-4); }
.u-mbe-lg { margin-block-end: var(--space-6); }

.u-mis-0    { margin-inline-start: 0; }
.u-mis-xs   { margin-inline-start: var(--space-1); }
.u-mis-sm   { margin-inline-start: var(--space-2); }
.u-mis-md   { margin-inline-start: var(--space-4); }
.u-mis-auto { margin-inline-start: auto; }
.u-mie-auto { margin-inline-end: auto; }
.u-mx-auto  { margin-inline: auto; }

/* legacy aliases used in existing template markup */
.u-ml-auto  { margin-inline-start: auto; } /* inline-start in LTR — RTL-safe */
.u-mr-auto  { margin-inline-end: auto; }

/* ── Spacing — Padding ───────────────────────────────────────────────────── */
.u-p0  { padding: 0; }
.u-p-xs { padding: var(--space-1); }
.u-p-sm { padding: var(--space-2); }
.u-p-md { padding: var(--space-4); }
.u-p-lg { padding: var(--space-6); }
.u-p-xl { padding: var(--space-8); }

.u-pt-0   { padding-block-start: 0; }
.u-pt-xs  { padding-block-start: var(--space-1); }
.u-pt-sm  { padding-block-start: var(--space-2); }
.u-pt-md  { padding-block-start: var(--space-4); }
.u-pt-lg  { padding-block-start: var(--space-6); }
.u-pt-xl  { padding-block-start: var(--space-8); }

.u-pb-0   { padding-block-end: 0; }
.u-pb-xs  { padding-block-end: var(--space-1); }
.u-pb-sm  { padding-block-end: var(--space-2); }
.u-pb-md  { padding-block-end: var(--space-4); }
.u-pb-lg  { padding-block-end: var(--space-6); }
.u-pb-xl  { padding-block-end: var(--space-8); }

.u-pbs-0  { padding-block-start: 0; }
.u-pbs-xs { padding-block-start: var(--space-1); }
.u-pbs-sm { padding-block-start: var(--space-2); }
.u-pbs-md { padding-block-start: var(--space-4); }
.u-pbs-lg { padding-block-start: var(--space-6); }

.u-pbe-0  { padding-block-end: 0; }
.u-pbe-xs { padding-block-end: var(--space-1); }
.u-pbe-sm { padding-block-end: var(--space-2); }
.u-pbe-md { padding-block-end: var(--space-4); }
.u-pbe-lg { padding-block-end: var(--space-6); }

.u-px-0   { padding-inline: 0; }
.u-px-xs  { padding-inline: var(--space-1); }
.u-px-sm  { padding-inline: var(--space-2); }
.u-px-md  { padding-inline: var(--space-4); }
.u-px-lg  { padding-inline: var(--space-6); }

.u-py-0   { padding-block: 0; }
.u-py-xs  { padding-block: var(--space-1); }
.u-py-sm  { padding-block: var(--space-2); }
.u-py-md  { padding-block: var(--space-4); }
.u-py-lg  { padding-block: var(--space-6); }

/* ── Typography — Size ──────────────────────────────────────────────────── */
.u-text-display  { font-size: var(--text-size-display); line-height: var(--leading-display, 1.15); font-family: var(--font-heading, var(--font-sans)); }
.u-text-h1       { font-size: var(--text-size-h1); line-height: var(--leading-heading, 1.2); font-family: var(--font-heading, var(--font-sans)); }
.u-text-h2       { font-size: var(--text-size-h2); line-height: var(--leading-heading, 1.25); font-family: var(--font-heading, var(--font-sans)); }
.u-text-h3       { font-size: var(--text-size-h3); line-height: var(--leading-heading, 1.3); font-family: var(--font-heading, var(--font-sans)); }
.u-text-subtitle { font-size: var(--text-size-subtitle); line-height: var(--leading-body, 1.5); }
.u-text-body     { font-size: var(--text-size-body);    line-height: var(--leading-body, 1.5); }
.u-text-body-sm  { font-size: var(--text-size-body-sm); line-height: var(--leading-body, 1.5); }
.u-text-caption  { font-size: var(--text-size-caption); line-height: var(--leading-body, 1.4); }
.u-text-overline {
  font-size: var(--text-size-overline);
  letter-spacing: var(--tracking-wider, 0.08em);
  text-transform: uppercase;
  font-weight: var(--font-weight-semibold);
}
.u-text-xs       { font-size: var(--text-size-xs); }
.u-text-mono     { font-family: var(--font-mono); font-size: var(--text-size-body-sm); }

/* ── Typography — Font weight / family / transform ──────────────────────── */
.u-fw-light     { font-weight: var(--font-weight-light, 300); }
.u-fw-regular   { font-weight: var(--font-weight-regular, 400); }
.u-fw-medium    { font-weight: var(--font-weight-medium, 500); }
.u-fw-semibold  { font-weight: var(--font-weight-semibold, 600); }
.u-fw-bold      { font-weight: var(--font-weight-bold, 700); }

.u-font-heading { font-family: var(--font-heading, var(--font-sans)); }
.u-font-body    { font-family: var(--font-body, var(--font-sans)); }
.u-font-mono    { font-family: var(--font-mono); }

.u-uppercase    { text-transform: uppercase; letter-spacing: var(--tracking-wider, 0.04em); }
.u-lowercase    { text-transform: lowercase; }
.u-capitalize   { text-transform: capitalize; }
.u-none         { text-transform: none; }

.u-italic       { font-style: italic; }
.u-not-italic   { font-style: normal; }

/* ── Typography — Alignment / whitespace ────────────────────────────────── */
.u-text-start   { text-align: start; }
.u-text-center  { text-align: center; }
.u-text-end     { text-align: end; }
.u-text-justify { text-align: justify; }

.u-nowrap       { white-space: nowrap; }
.u-wrap         { white-space: normal; }
.u-pre-wrap     { white-space: pre-wrap; }
.u-break-words  { overflow-wrap: break-word; word-break: break-word; }
.u-truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Color (semantic, theme-aware) ──────────────────────────────────────── */
.u-color-primary    { color: var(--color-primary); }
.u-color-accent     { color: var(--color-accent, var(--color-primary)); }
.u-color-body       { color: var(--text-body); }
.u-color-secondary  { color: var(--text-secondary); }
.u-color-tertiary   { color: var(--text-tertiary); }
.u-color-inverse    { color: var(--text-inverse); }
.u-color-link       { color: var(--text-link); }
.u-color-link-teal  { color: var(--text-link-teal); }
.u-color-success    { color: var(--success); }
.u-color-warning    { color: var(--warning); }
.u-color-error      { color: var(--error); }
.u-color-danger     { color: var(--error); } /* alias */
.u-color-teal       { color: var(--tag-teal-text); }
.u-color-gold       { color: var(--tag-gold-text); }

/* ── Background ──────────────────────────────────────────────────────────── */
.u-bg-page      { background-color: var(--bg-page); }
.u-bg-section   { background-color: var(--bg-section); }
.u-bg-card      { background-color: var(--bg-card); }
.u-bg-inset     { background-color: var(--bg-inset); }
.u-bg-elevated  { background-color: var(--bg-elevated); }
.u-bg-overlay   { background-color: var(--bg-overlay); }
.u-bg-primary   { background-color: var(--color-primary); }
.u-bg-none      { background-color: transparent; }

/* ── Border ─────────────────────────────────────────────────────────────── */
.u-border       { border: var(--border-width-thin, 1px) solid var(--border-default); }
.u-border-t     { border-block-start: var(--border-width-thin, 1px) solid var(--border-default); }
.u-border-b     { border-block-end:   var(--border-width-thin, 1px) solid var(--border-default); }
.u-border-s     { border-inline-start: var(--border-width-thin, 1px) solid var(--border-default); }
.u-border-e     { border-inline-end:   var(--border-width-thin, 1px) solid var(--border-default); }
.u-border-none   { border: 0; }
.u-border-t-none { border-block-start: 0; }
.u-border-b-none { border-block-end: 0; }
.u-border-strong { border-color: var(--border-strong); }
.u-border-subtle { border-color: var(--border-subtle); }

/* ── Border radius ──────────────────────────────────────────────────────── */
.u-rounded-none  { border-radius: 0; }
.u-rounded-xs    { border-radius: var(--radius-xs); }
.u-rounded-sm    { border-radius: var(--radius-sm); }
.u-rounded-md    { border-radius: var(--radius-md); }
.u-rounded-lg    { border-radius: var(--radius-lg); }
.u-rounded-xl    { border-radius: var(--radius-xl); }
.u-rounded-pill  { border-radius: var(--radius-pill); }
.u-rounded-full  { border-radius: var(--radius-full); }

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

/* ── Sizing ─────────────────────────────────────────────────────────────── */
.u-w-auto       { width: auto; }
.u-w-full       { width: 100%; }
.u-w-screen     { width: 100vw; }
.u-w-min        { width: min-content; }
.u-w-max        { width: max-content; }
.u-w-fit        { width: fit-content; }

/* percentage width helpers (used by skeletons and content lanes) */
.u-w-25  { width: 25%; }
.u-w-33  { width: 33.333%; }
.u-w-50  { width: 50%; }
.u-w-60  { width: 60%; }
.u-w-66  { width: 66.666%; }
.u-w-70  { width: 70%; }
.u-w-75  { width: 75%; }
.u-w-85  { width: 85%; }
.u-w-100 { width: 100%; }

.u-h-auto       { height: auto; }
.u-h-full       { height: 100%; }
.u-h-screen     { height: 100vh; }
.u-h-min        { height: min-content; }
.u-h-max        { height: max-content; }

.u-min-w-0      { min-width: 0; }
.u-min-h-0      { min-height: 0; }
.u-max-w-full   { max-width: 100%; }
.u-max-h-full   { max-height: 100%; }

/* ── Icon sizing (SVG / [data-lucide]) ──────────────────────────────────── */
.u-icon-12 { inline-size: 12px; block-size: 12px; flex-shrink: 0; }
.u-icon-14 { inline-size: 14px; block-size: 14px; flex-shrink: 0; }
.u-icon-16 { inline-size: 16px; block-size: 16px; flex-shrink: 0; }
.u-icon-20 { inline-size: 20px; block-size: 20px; flex-shrink: 0; }
.u-icon-22 { inline-size: 22px; block-size: 22px; flex-shrink: 0; }
.u-icon-32 { inline-size: 32px; block-size: 32px; flex-shrink: 0; }
.u-icon-48 { inline-size: 48px; block-size: 48px; flex-shrink: 0; }

/* ── Overflow ───────────────────────────────────────────────────────────── */
.u-overflow-hidden   { overflow: hidden; }
.u-overflow-visible  { overflow: visible; }
.u-overflow-auto     { overflow: auto; }
.u-overflow-scroll-x { overflow-x: auto; overflow-y: hidden; }
.u-overflow-scroll-y { overflow-y: auto; overflow-x: hidden; }

/* ── Opacity ────────────────────────────────────────────────────────────── */
.u-opacity-0   { opacity: 0; }
.u-opacity-25  { opacity: 0.25; }
.u-opacity-50  { opacity: 0.5; }
.u-opacity-70  { opacity: 0.7; }
.u-opacity-100 { opacity: 1; }

/* ── Cursor ─────────────────────────────────────────────────────────────── */
.u-cursor-auto         { cursor: auto; }
.u-cursor-default      { cursor: default; }
.u-cursor-pointer      { cursor: pointer; }
.u-cursor-not-allowed  { cursor: not-allowed; }
.u-cursor-wait         { cursor: wait; }

/* ── Vertical align (table/cell) ────────────────────────────────────────── */
.u-valign-baseline { vertical-align: baseline; }
.u-valign-top      { vertical-align: top; }
.u-valign-middle   { vertical-align: middle; }
.u-valign-bottom   { vertical-align: bottom; }

/* ── User-select / pointer-events ───────────────────────────────────────── */
.u-select-none { user-select: none; }
.u-select-text { user-select: text; }
.u-select-all  { user-select: all; }
.u-select-auto { user-select: auto; }

.u-pointer-events-none { pointer-events: none; }
.u-pointer-events-auto { pointer-events: auto; }

/* ── Z-index ────────────────────────────────────────────────────────────── */
.u-z-auto     { z-index: auto; }
.u-z-0        { z-index: 0; }
.u-z-sticky   { z-index: var(--z-sticky, 10); }
.u-z-dropdown { z-index: var(--z-dropdown, 1000); }
.u-z-modal    { z-index: var(--z-modal, 2000); }
.u-z-toast    { z-index: var(--z-toast, 3000); }

/* =============================================================================
   RTL note — every margin/padding/border utility above uses logical properties
   (*-block-*, *-inline-*). They flip automatically under `dir="rtl"`. Avoid
   writing `.u-ml-*` / `.u-pr-*` — those physical variants are intentionally
   not shipped. The two legacy aliases (`.u-ml-auto`, `.u-mr-auto`) resolve to
   `margin-inline-start:auto` / `margin-inline-end:auto` for the same reason.
   ============================================================================= */