/**
 * WebCRG utility classes.
 *
 * One class, one job, one token. Names read u-{property}-{token}:
 *   - spacing numbers are theme.json spacing slugs: u-p-40 is
 *     --wp--preset--spacing--40, so changing the preset changes every u-*-40;
 *   - colours, radii, shadows and measures are --crg-* tokens.
 *
 * Precedence, with no !important anywhere: editor settings (inline styles and
 * the has-* preset classes) beat a utility, and a utility beats a single-class
 * component rule because this file loads last.
 *
 * Inside each family the shorthand comes before the longhand, so
 * "u-m-0 u-mt-20" leaves a top margin and nothing else.
 */

/* -- Spacing: margin ---------------------------------------------------------- */

.u-m-0 { margin: 0; }
.u-mx-auto { margin-inline: auto; }
.u-mt-0 { margin-block-start: 0; }
.u-mt-20 { margin-block-start: var( --wp--preset--spacing--20 ); }
.u-mt-30 { margin-block-start: var( --wp--preset--spacing--30 ); }
.u-mt-40 { margin-block-start: var( --wp--preset--spacing--40 ); }
.u-mt-50 { margin-block-start: var( --wp--preset--spacing--50 ); }
.u-mt-60 { margin-block-start: var( --wp--preset--spacing--60 ); }
.u-mt-70 { margin-block-start: var( --wp--preset--spacing--70 ); }
.u-mt-80 { margin-block-start: var( --wp--preset--spacing--80 ); }
.u-mb-0 { margin-block-end: 0; }
.u-mb-20 { margin-block-end: var( --wp--preset--spacing--20 ); }
.u-mb-30 { margin-block-end: var( --wp--preset--spacing--30 ); }
.u-mb-40 { margin-block-end: var( --wp--preset--spacing--40 ); }
.u-mb-50 { margin-block-end: var( --wp--preset--spacing--50 ); }
.u-mb-60 { margin-block-end: var( --wp--preset--spacing--60 ); }
.u-mb-70 { margin-block-end: var( --wp--preset--spacing--70 ); }
.u-mb-80 { margin-block-end: var( --wp--preset--spacing--80 ); }

/* -- Spacing: padding --------------------------------------------------------- */

.u-p-0 { padding: 0; }
.u-p-20 { padding: var( --wp--preset--spacing--20 ); }
.u-p-30 { padding: var( --wp--preset--spacing--30 ); }
.u-p-40 { padding: var( --wp--preset--spacing--40 ); }
.u-p-50 { padding: var( --wp--preset--spacing--50 ); }
.u-p-60 { padding: var( --wp--preset--spacing--60 ); }
.u-p-70 { padding: var( --wp--preset--spacing--70 ); }
.u-p-80 { padding: var( --wp--preset--spacing--80 ); }
.u-px-0 { padding-inline: 0; }
.u-px-20 { padding-inline: var( --wp--preset--spacing--20 ); }
.u-px-30 { padding-inline: var( --wp--preset--spacing--30 ); }
.u-px-40 { padding-inline: var( --wp--preset--spacing--40 ); }
.u-px-50 { padding-inline: var( --wp--preset--spacing--50 ); }
.u-px-60 { padding-inline: var( --wp--preset--spacing--60 ); }
.u-px-70 { padding-inline: var( --wp--preset--spacing--70 ); }
.u-px-80 { padding-inline: var( --wp--preset--spacing--80 ); }
.u-py-0 { padding-block: 0; }
.u-py-20 { padding-block: var( --wp--preset--spacing--20 ); }
.u-py-30 { padding-block: var( --wp--preset--spacing--30 ); }
.u-py-40 { padding-block: var( --wp--preset--spacing--40 ); }
.u-py-50 { padding-block: var( --wp--preset--spacing--50 ); }
.u-py-60 { padding-block: var( --wp--preset--spacing--60 ); }
.u-py-70 { padding-block: var( --wp--preset--spacing--70 ); }
.u-py-80 { padding-block: var( --wp--preset--spacing--80 ); }
.u-pt-0 { padding-block-start: 0; }
.u-pt-20 { padding-block-start: var( --wp--preset--spacing--20 ); }
.u-pt-30 { padding-block-start: var( --wp--preset--spacing--30 ); }
.u-pt-40 { padding-block-start: var( --wp--preset--spacing--40 ); }
.u-pt-50 { padding-block-start: var( --wp--preset--spacing--50 ); }
.u-pt-60 { padding-block-start: var( --wp--preset--spacing--60 ); }
.u-pt-70 { padding-block-start: var( --wp--preset--spacing--70 ); }
.u-pt-80 { padding-block-start: var( --wp--preset--spacing--80 ); }
.u-pb-0 { padding-block-end: 0; }
.u-pb-20 { padding-block-end: var( --wp--preset--spacing--20 ); }
.u-pb-30 { padding-block-end: var( --wp--preset--spacing--30 ); }
.u-pb-40 { padding-block-end: var( --wp--preset--spacing--40 ); }
.u-pb-50 { padding-block-end: var( --wp--preset--spacing--50 ); }
.u-pb-60 { padding-block-end: var( --wp--preset--spacing--60 ); }
.u-pb-70 { padding-block-end: var( --wp--preset--spacing--70 ); }
.u-pb-80 { padding-block-end: var( --wp--preset--spacing--80 ); }

/* -- Spacing: gap ------------------------------------------------------------- */

.u-gap-0 { gap: 0; }
.u-gap-20 { gap: var( --wp--preset--spacing--20 ); }
.u-gap-30 { gap: var( --wp--preset--spacing--30 ); }
.u-gap-40 { gap: var( --wp--preset--spacing--40 ); }
.u-gap-50 { gap: var( --wp--preset--spacing--50 ); }
.u-gap-60 { gap: var( --wp--preset--spacing--60 ); }
.u-gap-70 { gap: var( --wp--preset--spacing--70 ); }
.u-gap-80 { gap: var( --wp--preset--spacing--80 ); }
.u-gap-x-0 { column-gap: 0; }
.u-gap-x-20 { column-gap: var( --wp--preset--spacing--20 ); }
.u-gap-x-30 { column-gap: var( --wp--preset--spacing--30 ); }
.u-gap-x-40 { column-gap: var( --wp--preset--spacing--40 ); }
.u-gap-x-50 { column-gap: var( --wp--preset--spacing--50 ); }
.u-gap-x-60 { column-gap: var( --wp--preset--spacing--60 ); }
.u-gap-x-70 { column-gap: var( --wp--preset--spacing--70 ); }
.u-gap-x-80 { column-gap: var( --wp--preset--spacing--80 ); }
.u-gap-y-0 { row-gap: 0; }
.u-gap-y-20 { row-gap: var( --wp--preset--spacing--20 ); }
.u-gap-y-30 { row-gap: var( --wp--preset--spacing--30 ); }
.u-gap-y-40 { row-gap: var( --wp--preset--spacing--40 ); }
.u-gap-y-50 { row-gap: var( --wp--preset--spacing--50 ); }
.u-gap-y-60 { row-gap: var( --wp--preset--spacing--60 ); }
.u-gap-y-70 { row-gap: var( --wp--preset--spacing--70 ); }
.u-gap-y-80 { row-gap: var( --wp--preset--spacing--80 ); }

/* -- Colour ------------------------------------------------------------------- */

.u-text { color: var( --crg-color-text ); }
.u-text-muted { color: var( --crg-color-text-muted ); }
.u-text-dim { color: var( --crg-color-text-dim ); }
.u-text-accent { color: var( --crg-color-accent ); }
.u-text-on-accent { color: var( --crg-color-text-on-accent ); }
.u-bg { background-color: var( --crg-color-bg ); }
.u-bg-surface { background-color: var( --crg-color-surface ); }
.u-bg-surface-alt { background-color: var( --crg-color-surface-alt ); }
.u-bg-accent { background-color: var( --crg-color-accent ); }
.u-bg-accent-soft { background-color: var( --crg-color-accent-soft ); }

/* -- Borders, radius, shadow -------------------------------------------------- */

.u-border { border: 1px solid var( --crg-color-border ); }
.u-border-t { border-block-start: 1px solid var( --crg-color-border ); }
.u-border-b { border-block-end: 1px solid var( --crg-color-border ); }
.u-border-accent { border-color: var( --crg-color-accent ); }
.u-rounded-sm { border-radius: var( --crg-radius-sm ); }
.u-rounded-md { border-radius: var( --crg-radius-md ); }
.u-rounded-lg { border-radius: var( --crg-radius-lg ); }
.u-rounded-pill { border-radius: var( --crg-radius-pill ); }
.u-shadow-card { box-shadow: var( --crg-shadow-card ); }
.u-shadow-card-hover { box-shadow: var( --crg-shadow-card-hover ); }

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

.u-font-normal { font-weight: 400; }
.u-font-semibold { font-weight: 600; }
.u-font-bold { font-weight: 700; }
.u-uppercase { text-transform: uppercase; }
.u-tracking-normal { letter-spacing: 0; }
.u-tracking-wide { letter-spacing: var( --crg-tracking-wide ); }
.u-mono { font-family: var( --crg-font-mono ); }
.u-balance { text-wrap: balance; }
.u-pretty { text-wrap: pretty; }
.u-text-center { text-align: center; }
.u-no-underline { text-decoration: none; }

/* -- Measure ------------------------------------------------------------------ */

.u-measure-title { max-width: var( --crg-measure-title ); }
.u-measure-heading { max-width: var( --crg-measure-heading ); }
.u-measure-text { max-width: var( --crg-measure-text ); }
.u-measure-prose { max-width: var( --crg-measure-prose ); }

/* -- Layout ------------------------------------------------------------------- */

.u-flex { display: flex; }
.u-grid { display: grid; }
.u-flex-wrap { flex-wrap: wrap; }
.u-items-center { align-items: center; }
.u-justify-center { justify-content: center; }
.u-relative { position: relative; }
.u-overflow-hidden { overflow: hidden; }
.u-list-none { list-style: none; }