/* ARC UI utilities — GENERATED by scripts/generate/utilities.js.
   Do not edit by hand; edit shared/tokens.js and shared/utilities.js.

   Opt-in and standalone:  import '@arclux/arc-ui/utilities.css';

   Every declaration reads a token variable rather than a literal, so
   overriding --space-md (or any other base token) moves these classes and the
   components together. Requires base.css, or your own definitions of the same
   variables.

   Light DOM only: a class cannot cross a shadow boundary, so these style the
   space around ARC components, never anything inside one.

   272 classes. */

/* ── Padding ── */
.arc-p-xs { padding: var(--space-xs); }
.arc-p-sm { padding: var(--space-sm); }
.arc-p-md { padding: var(--space-md); }
.arc-p-lg { padding: var(--space-lg); }
.arc-p-xl { padding: var(--space-xl); }
.arc-p-2xl { padding: var(--space-2xl); }
.arc-p-3xl { padding: var(--space-3xl); }
.arc-p-4xl { padding: var(--space-4xl); }
.arc-p-0 { padding: 0; }
.arc-px-xs { padding-inline: var(--space-xs); }
.arc-px-sm { padding-inline: var(--space-sm); }
.arc-px-md { padding-inline: var(--space-md); }
.arc-px-lg { padding-inline: var(--space-lg); }
.arc-px-xl { padding-inline: var(--space-xl); }
.arc-px-2xl { padding-inline: var(--space-2xl); }
.arc-px-3xl { padding-inline: var(--space-3xl); }
.arc-px-4xl { padding-inline: var(--space-4xl); }
.arc-px-0 { padding-inline: 0; }
.arc-py-xs { padding-block: var(--space-xs); }
.arc-py-sm { padding-block: var(--space-sm); }
.arc-py-md { padding-block: var(--space-md); }
.arc-py-lg { padding-block: var(--space-lg); }
.arc-py-xl { padding-block: var(--space-xl); }
.arc-py-2xl { padding-block: var(--space-2xl); }
.arc-py-3xl { padding-block: var(--space-3xl); }
.arc-py-4xl { padding-block: var(--space-4xl); }
.arc-py-0 { padding-block: 0; }
.arc-ps-xs { padding-inline-start: var(--space-xs); }
.arc-ps-sm { padding-inline-start: var(--space-sm); }
.arc-ps-md { padding-inline-start: var(--space-md); }
.arc-ps-lg { padding-inline-start: var(--space-lg); }
.arc-ps-xl { padding-inline-start: var(--space-xl); }
.arc-ps-2xl { padding-inline-start: var(--space-2xl); }
.arc-ps-3xl { padding-inline-start: var(--space-3xl); }
.arc-ps-4xl { padding-inline-start: var(--space-4xl); }
.arc-ps-0 { padding-inline-start: 0; }
.arc-pe-xs { padding-inline-end: var(--space-xs); }
.arc-pe-sm { padding-inline-end: var(--space-sm); }
.arc-pe-md { padding-inline-end: var(--space-md); }
.arc-pe-lg { padding-inline-end: var(--space-lg); }
.arc-pe-xl { padding-inline-end: var(--space-xl); }
.arc-pe-2xl { padding-inline-end: var(--space-2xl); }
.arc-pe-3xl { padding-inline-end: var(--space-3xl); }
.arc-pe-4xl { padding-inline-end: var(--space-4xl); }
.arc-pe-0 { padding-inline-end: 0; }
.arc-pt-xs { padding-block-start: var(--space-xs); }
.arc-pt-sm { padding-block-start: var(--space-sm); }
.arc-pt-md { padding-block-start: var(--space-md); }
.arc-pt-lg { padding-block-start: var(--space-lg); }
.arc-pt-xl { padding-block-start: var(--space-xl); }
.arc-pt-2xl { padding-block-start: var(--space-2xl); }
.arc-pt-3xl { padding-block-start: var(--space-3xl); }
.arc-pt-4xl { padding-block-start: var(--space-4xl); }
.arc-pt-0 { padding-block-start: 0; }
.arc-pb-xs { padding-block-end: var(--space-xs); }
.arc-pb-sm { padding-block-end: var(--space-sm); }
.arc-pb-md { padding-block-end: var(--space-md); }
.arc-pb-lg { padding-block-end: var(--space-lg); }
.arc-pb-xl { padding-block-end: var(--space-xl); }
.arc-pb-2xl { padding-block-end: var(--space-2xl); }
.arc-pb-3xl { padding-block-end: var(--space-3xl); }
.arc-pb-4xl { padding-block-end: var(--space-4xl); }
.arc-pb-0 { padding-block-end: 0; }

/* ── Margin ── */
.arc-m-xs { margin: var(--space-xs); }
.arc-m-sm { margin: var(--space-sm); }
.arc-m-md { margin: var(--space-md); }
.arc-m-lg { margin: var(--space-lg); }
.arc-m-xl { margin: var(--space-xl); }
.arc-m-2xl { margin: var(--space-2xl); }
.arc-m-3xl { margin: var(--space-3xl); }
.arc-m-4xl { margin: var(--space-4xl); }
.arc-m-0 { margin: 0; }
.arc-m-auto { margin: auto; }
.arc-mx-xs { margin-inline: var(--space-xs); }
.arc-mx-sm { margin-inline: var(--space-sm); }
.arc-mx-md { margin-inline: var(--space-md); }
.arc-mx-lg { margin-inline: var(--space-lg); }
.arc-mx-xl { margin-inline: var(--space-xl); }
.arc-mx-2xl { margin-inline: var(--space-2xl); }
.arc-mx-3xl { margin-inline: var(--space-3xl); }
.arc-mx-4xl { margin-inline: var(--space-4xl); }
.arc-mx-0 { margin-inline: 0; }
.arc-mx-auto { margin-inline: auto; }
.arc-my-xs { margin-block: var(--space-xs); }
.arc-my-sm { margin-block: var(--space-sm); }
.arc-my-md { margin-block: var(--space-md); }
.arc-my-lg { margin-block: var(--space-lg); }
.arc-my-xl { margin-block: var(--space-xl); }
.arc-my-2xl { margin-block: var(--space-2xl); }
.arc-my-3xl { margin-block: var(--space-3xl); }
.arc-my-4xl { margin-block: var(--space-4xl); }
.arc-my-0 { margin-block: 0; }
.arc-my-auto { margin-block: auto; }
.arc-ms-xs { margin-inline-start: var(--space-xs); }
.arc-ms-sm { margin-inline-start: var(--space-sm); }
.arc-ms-md { margin-inline-start: var(--space-md); }
.arc-ms-lg { margin-inline-start: var(--space-lg); }
.arc-ms-xl { margin-inline-start: var(--space-xl); }
.arc-ms-2xl { margin-inline-start: var(--space-2xl); }
.arc-ms-3xl { margin-inline-start: var(--space-3xl); }
.arc-ms-4xl { margin-inline-start: var(--space-4xl); }
.arc-ms-0 { margin-inline-start: 0; }
.arc-ms-auto { margin-inline-start: auto; }
.arc-me-xs { margin-inline-end: var(--space-xs); }
.arc-me-sm { margin-inline-end: var(--space-sm); }
.arc-me-md { margin-inline-end: var(--space-md); }
.arc-me-lg { margin-inline-end: var(--space-lg); }
.arc-me-xl { margin-inline-end: var(--space-xl); }
.arc-me-2xl { margin-inline-end: var(--space-2xl); }
.arc-me-3xl { margin-inline-end: var(--space-3xl); }
.arc-me-4xl { margin-inline-end: var(--space-4xl); }
.arc-me-0 { margin-inline-end: 0; }
.arc-me-auto { margin-inline-end: auto; }
.arc-mt-xs { margin-block-start: var(--space-xs); }
.arc-mt-sm { margin-block-start: var(--space-sm); }
.arc-mt-md { margin-block-start: var(--space-md); }
.arc-mt-lg { margin-block-start: var(--space-lg); }
.arc-mt-xl { margin-block-start: var(--space-xl); }
.arc-mt-2xl { margin-block-start: var(--space-2xl); }
.arc-mt-3xl { margin-block-start: var(--space-3xl); }
.arc-mt-4xl { margin-block-start: var(--space-4xl); }
.arc-mt-0 { margin-block-start: 0; }
.arc-mt-auto { margin-block-start: auto; }
.arc-mb-xs { margin-block-end: var(--space-xs); }
.arc-mb-sm { margin-block-end: var(--space-sm); }
.arc-mb-md { margin-block-end: var(--space-md); }
.arc-mb-lg { margin-block-end: var(--space-lg); }
.arc-mb-xl { margin-block-end: var(--space-xl); }
.arc-mb-2xl { margin-block-end: var(--space-2xl); }
.arc-mb-3xl { margin-block-end: var(--space-3xl); }
.arc-mb-4xl { margin-block-end: var(--space-4xl); }
.arc-mb-0 { margin-block-end: 0; }
.arc-mb-auto { margin-block-end: auto; }

/* ── Gap ── */
.arc-gap-xs { gap: var(--space-xs); }
.arc-gap-x-xs { column-gap: var(--space-xs); }
.arc-gap-y-xs { row-gap: var(--space-xs); }
.arc-gap-sm { gap: var(--space-sm); }
.arc-gap-x-sm { column-gap: var(--space-sm); }
.arc-gap-y-sm { row-gap: var(--space-sm); }
.arc-gap-md { gap: var(--space-md); }
.arc-gap-x-md { column-gap: var(--space-md); }
.arc-gap-y-md { row-gap: var(--space-md); }
.arc-gap-lg { gap: var(--space-lg); }
.arc-gap-x-lg { column-gap: var(--space-lg); }
.arc-gap-y-lg { row-gap: var(--space-lg); }
.arc-gap-xl { gap: var(--space-xl); }
.arc-gap-x-xl { column-gap: var(--space-xl); }
.arc-gap-y-xl { row-gap: var(--space-xl); }
.arc-gap-2xl { gap: var(--space-2xl); }
.arc-gap-x-2xl { column-gap: var(--space-2xl); }
.arc-gap-y-2xl { row-gap: var(--space-2xl); }
.arc-gap-3xl { gap: var(--space-3xl); }
.arc-gap-x-3xl { column-gap: var(--space-3xl); }
.arc-gap-y-3xl { row-gap: var(--space-3xl); }
.arc-gap-4xl { gap: var(--space-4xl); }
.arc-gap-x-4xl { column-gap: var(--space-4xl); }
.arc-gap-y-4xl { row-gap: var(--space-4xl); }
.arc-gap-0 { gap: 0; }

/* ── Display ── */
.arc-block { display: block; }
.arc-inline-block { display: inline-block; }
.arc-inline { display: inline; }
.arc-flex { display: flex; }
.arc-inline-flex { display: inline-flex; }
.arc-grid { display: grid; }
.arc-inline-grid { display: inline-grid; }
.arc-contents { display: contents; }
.arc-hidden { display: none; }

/* ── Flex ── */
.arc-flex-row { flex-direction: row; }
.arc-flex-col { flex-direction: column; }
.arc-flex-row-reverse { flex-direction: row-reverse; }
.arc-flex-col-reverse { flex-direction: column-reverse; }
.arc-flex-wrap { flex-wrap: wrap; }
.arc-flex-nowrap { flex-wrap: nowrap; }
.arc-flex-1 { flex: 1 1 0%; }
.arc-flex-auto { flex: 1 1 auto; }
.arc-flex-none { flex: none; }
.arc-grow { flex-grow: 1; }
.arc-grow-0 { flex-grow: 0; }
.arc-shrink { flex-shrink: 1; }
.arc-shrink-0 { flex-shrink: 0; }

/* ── Alignment ── */
.arc-items-start { align-items: flex-start; }
.arc-items-center { align-items: center; }
.arc-items-end { align-items: flex-end; }
.arc-items-stretch { align-items: stretch; }
.arc-items-baseline { align-items: baseline; }
.arc-justify-start { justify-content: flex-start; }
.arc-justify-center { justify-content: center; }
.arc-justify-end { justify-content: flex-end; }
.arc-justify-between { justify-content: space-between; }
.arc-justify-around { justify-content: space-around; }
.arc-justify-evenly { justify-content: space-evenly; }
.arc-self-start { align-self: flex-start; }
.arc-self-center { align-self: center; }
.arc-self-end { align-self: flex-end; }
.arc-self-stretch { align-self: stretch; }
.arc-self-auto { align-self: auto; }

/* ── Grid ── */
.arc-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.arc-col-span-1 { grid-column: span 1 / span 1; }
.arc-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.arc-col-span-2 { grid-column: span 2 / span 2; }
.arc-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.arc-col-span-3 { grid-column: span 3 / span 3; }
.arc-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.arc-col-span-4 { grid-column: span 4 / span 4; }
.arc-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.arc-col-span-5 { grid-column: span 5 / span 5; }
.arc-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.arc-col-span-6 { grid-column: span 6 / span 6; }
.arc-col-span-full { grid-column: 1 / -1; }

/* ── Size ── */
.arc-w-full { inline-size: 100%; }
.arc-w-auto { inline-size: auto; }
.arc-w-fit { inline-size: fit-content; }
.arc-h-full { block-size: 100%; }
.arc-h-auto { block-size: auto; }
.arc-h-fit { block-size: fit-content; }
.arc-max-w-full { max-inline-size: 100%; }
.arc-min-w-0 { min-inline-size: 0; }
.arc-min-h-0 { min-block-size: 0; }

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

/* ── Color ── */
.arc-text-xs { font-size: var(--text-xs); }
.arc-text-sm { font-size: var(--text-sm); }
.arc-text-md { font-size: var(--text-md); }
.arc-text-lg { font-size: var(--text-lg); }
.arc-text-xl { font-size: var(--text-xl); }
.arc-text-2xl { font-size: var(--text-2xl); }
.arc-text-3xl { font-size: var(--text-3xl); }
.arc-text-primary { color: var(--text-primary); }
.arc-text-secondary { color: var(--text-secondary); }
.arc-text-muted { color: var(--text-muted); }
.arc-text-ghost { color: var(--text-ghost); }
.arc-text-accent-primary { color: var(--accent-primary); }
.arc-text-accent-secondary { color: var(--accent-secondary); }
.arc-text-success { color: var(--color-success); }
.arc-text-error { color: var(--color-error); }
.arc-text-warning { color: var(--color-warning); }
.arc-text-info { color: var(--color-info); }
.arc-bg-deep { background-color: var(--bg-deep); }
.arc-bg-surface { background-color: var(--bg-surface); }
.arc-bg-base { background-color: var(--bg-base); }
.arc-bg-card { background-color: var(--bg-card); }
.arc-bg-elevated { background-color: var(--bg-elevated); }
.arc-bg-accent-primary { background-color: var(--accent-primary); }
.arc-bg-accent-secondary { background-color: var(--accent-secondary); }
.arc-bg-success { background-color: var(--color-success); }
.arc-bg-error { background-color: var(--color-error); }
.arc-bg-warning { background-color: var(--color-warning); }
.arc-bg-info { background-color: var(--color-info); }
.arc-bg-none { background: none; }

/* ── Border ── */
.arc-border { border: 1px solid var(--border-default); }
.arc-border-0 { border: 0; }
.arc-border-subtle { border-color: var(--border-subtle); }
.arc-border-default { border-color: var(--border-default); }
.arc-border-bright { border-color: var(--border-bright); }

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

/* ── Font role ── */
.arc-font-body { font-family: var(--font-body); }
.arc-font-label { font-family: var(--font-label); }
.arc-font-mono { font-family: var(--font-mono); }
.arc-font-display { font-family: var(--font-display); }
.arc-font-quote { font-family: var(--font-quote); }