/* ==========================================================================
   Utility Classes — Quick helpers for rapid prototyping
   Based on Carbon tokens. Use these to move fast.
   ========================================================================== */

/* ── Typography ─────────────────────────────────────────────────────────── */
.text-body-compact { font-size: var(--cds-body-compact-01-size); line-height: var(--cds-body-compact-01-lh); letter-spacing: var(--cds-body-compact-01-ls); }
.text-body-01      { font-size: var(--cds-body-01-size); line-height: var(--cds-body-01-lh); letter-spacing: var(--cds-body-01-ls); }
.text-body-02      { font-size: var(--cds-body-02-size); line-height: var(--cds-body-02-lh); letter-spacing: var(--cds-body-02-ls); }
.text-heading-01   { font-size: var(--cds-heading-01-size); font-weight: var(--cds-heading-01-weight); line-height: var(--cds-heading-01-lh); }
.text-heading-02   { font-size: var(--cds-heading-02-size); font-weight: var(--cds-heading-02-weight); line-height: var(--cds-heading-02-lh); }
.text-heading-03   { font-size: var(--cds-heading-03-size); font-weight: var(--cds-heading-03-weight); line-height: var(--cds-heading-03-lh); }
.text-heading-04   { font-size: var(--cds-heading-04-size); font-weight: var(--cds-heading-04-weight); line-height: var(--cds-heading-04-lh); }
.text-heading-05   { font-size: var(--cds-heading-05-size); font-weight: var(--cds-heading-05-weight); line-height: var(--cds-heading-05-lh); }
.text-heading-06   { font-size: var(--cds-heading-06-size); font-weight: var(--cds-heading-06-weight); line-height: var(--cds-heading-06-lh); }
.text-heading-07   { font-size: var(--cds-heading-07-size); font-weight: var(--cds-heading-07-weight); line-height: var(--cds-heading-07-lh); }
.text-label         { font-size: var(--cds-label-01-size); font-weight: var(--cds-label-01-weight); line-height: var(--cds-label-01-lh); letter-spacing: var(--cds-label-01-ls); }
.text-helper        { font-size: var(--cds-helper-text-01-size); line-height: var(--cds-helper-text-01-lh); letter-spacing: var(--cds-helper-text-01-ls); color: var(--cds-text-helper); }
.font-mono          { font-family: var(--cds-font-family-mono); }

/* ── Color: Text ────────────────────────────────────────────────────────── */
.text-primary     { color: var(--cds-text-primary); }
.text-secondary   { color: var(--cds-text-secondary); }
.text-on-color    { color: var(--cds-text-on-color); }
.text-error       { color: var(--cds-text-error); }
.text-inverse     { color: var(--cds-text-inverse); }
.text-disabled    { color: var(--cds-text-disabled); }

/* ── Color: Background ──────────────────────────────────────────────────── */
.bg-background    { background-color: var(--cds-background); }
.bg-layer-01      { background-color: var(--cds-layer-01); }
.bg-layer-02      { background-color: var(--cds-layer-02); }
.bg-layer-03      { background-color: var(--cds-layer-03); }
.bg-inverse       { background-color: var(--cds-background-inverse); }
.bg-brand         { background-color: var(--cds-background-brand); }
.bg-field-01      { background-color: var(--cds-field-01); }
.bg-field-02      { background-color: var(--cds-field-02); }

/* ── Color: Support ─────────────────────────────────────────────────────── */
.bg-error         { background-color: var(--cds-support-error); }
.bg-success       { background-color: var(--cds-support-success); }
.bg-warning       { background-color: var(--cds-support-warning); }
.bg-info          { background-color: var(--cds-support-info); }

/* ── Spacing (margin) ───────────────────────────────────────────────────── */
.m-0  { margin: 0; }         .m-1  { margin: var(--cds-spacing-01); }
.m-2  { margin: var(--cds-spacing-02); }  .m-3  { margin: var(--cds-spacing-03); }
.m-4  { margin: var(--cds-spacing-04); }  .m-5  { margin: var(--cds-spacing-05); }
.m-6  { margin: var(--cds-spacing-06); }  .m-7  { margin: var(--cds-spacing-07); }
.m-8  { margin: var(--cds-spacing-08); }  .m-9  { margin: var(--cds-spacing-09); }
.m-10 { margin: var(--cds-spacing-10); }

.mt-1 { margin-top: var(--cds-spacing-01); }  .mt-2 { margin-top: var(--cds-spacing-02); }
.mt-3 { margin-top: var(--cds-spacing-03); }  .mt-4 { margin-top: var(--cds-spacing-04); }
.mt-5 { margin-top: var(--cds-spacing-05); }  .mt-6 { margin-top: var(--cds-spacing-06); }
.mt-7 { margin-top: var(--cds-spacing-07); }  .mt-8 { margin-top: var(--cds-spacing-08); }

.mb-1 { margin-bottom: var(--cds-spacing-01); }  .mb-2 { margin-bottom: var(--cds-spacing-02); }
.mb-3 { margin-bottom: var(--cds-spacing-03); }  .mb-4 { margin-bottom: var(--cds-spacing-04); }
.mb-5 { margin-bottom: var(--cds-spacing-05); }  .mb-6 { margin-bottom: var(--cds-spacing-06); }
.mb-7 { margin-bottom: var(--cds-spacing-07); }  .mb-8 { margin-bottom: var(--cds-spacing-08); }

/* ── Spacing (padding) ──────────────────────────────────────────────────── */
.p-0  { padding: 0; }         .p-1  { padding: var(--cds-spacing-01); }
.p-2  { padding: var(--cds-spacing-02); }  .p-3  { padding: var(--cds-spacing-03); }
.p-4  { padding: var(--cds-spacing-04); }  .p-5  { padding: var(--cds-spacing-05); }
.p-6  { padding: var(--cds-spacing-06); }  .p-7  { padding: var(--cds-spacing-07); }
.p-8  { padding: var(--cds-spacing-08); }  .p-9  { padding: var(--cds-spacing-09); }
.p-10 { padding: var(--cds-spacing-10); }

.pt-5 { padding-top: var(--cds-spacing-05); }  .pt-6 { padding-top: var(--cds-spacing-06); }
.pb-5 { padding-bottom: var(--cds-spacing-05); }  .pb-6 { padding-bottom: var(--cds-spacing-06); }
.px-5 { padding-left: var(--cds-spacing-05); padding-right: var(--cds-spacing-05); }
.px-6 { padding-left: var(--cds-spacing-06); padding-right: var(--cds-spacing-06); }
.py-5 { padding-top: var(--cds-spacing-05); padding-bottom: var(--cds-spacing-05); }
.py-6 { padding-top: var(--cds-spacing-06); padding-bottom: var(--cds-spacing-06); }

/* ── Flexbox ────────────────────────────────────────────────────────────── */
.flex          { display: flex; }
.inline-flex   { display: inline-flex; }
.flex-col      { flex-direction: column; }
.flex-row      { flex-direction: row; }
.flex-wrap     { flex-wrap: wrap; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }
.justify-center   { justify-content: center; }
.justify-between  { justify-content: space-between; }
.justify-end      { justify-content: flex-end; }
.gap-2  { gap: var(--cds-spacing-02); }
.gap-3  { gap: var(--cds-spacing-03); }
.gap-4  { gap: var(--cds-spacing-04); }
.gap-5  { gap: var(--cds-spacing-05); }
.gap-6  { gap: var(--cds-spacing-06); }
.gap-7  { gap: var(--cds-spacing-07); }
.flex-1 { flex: 1; }

/* ── Grid ───────────────────────────────────────────────────────────────── */
.grid          { display: grid; }
.grid-cols-2   { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3   { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4   { grid-template-columns: repeat(4, 1fr); }
.col-span-2    { grid-column: span 2; }
.col-span-3    { grid-column: span 3; }
.col-span-4    { grid-column: span 4; }

/* ── Sizing ─────────────────────────────────────────────────────────────── */
.w-full    { width: 100%; }
.h-full    { height: 100%; }
.min-h-screen { min-height: 100vh; }
.max-w-sm  { max-width: 320px; }
.max-w-md  { max-width: 672px; }
.max-w-lg  { max-width: 1056px; }
.max-w-xl  { max-width: 1312px; }

/* ── Borders ────────────────────────────────────────────────────────────── */
.border         { border: 1px solid var(--cds-border-subtle-00); }
.border-strong  { border: 1px solid var(--cds-border-strong-01); }
.border-bottom  { border-bottom: 1px solid var(--cds-border-subtle-00); }
.rounded-sm     { border-radius: var(--cds-radius-sm); }
.rounded-md     { border-radius: var(--cds-radius-md); }
.rounded-lg     { border-radius: var(--cds-radius-lg); }

/* ── Shadows ────────────────────────────────────────────────────────────── */
.shadow-sm { box-shadow: var(--cds-shadow-sm); }
.shadow-md { box-shadow: var(--cds-shadow-md); }
.shadow-lg { box-shadow: var(--cds-shadow-lg); }

/* ── Display ────────────────────────────────────────────────────────────── */
.block        { display: block; }
.inline-block { display: inline-block; }
.hidden       { display: none; }
.overflow-hidden { overflow: hidden; }
.relative     { position: relative; }
.absolute     { position: absolute; }
.fixed        { position: fixed; }
.sticky       { position: sticky; }

/* ── Misc ───────────────────────────────────────────────────────────────── */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cursor-pointer { cursor: pointer; }
.transition { transition: all var(--cds-duration-moderate-01) var(--cds-easing-standard); }
.no-underline { text-decoration: none; }
.font-semibold { font-weight: 600; }
.font-light { font-weight: 300; }
.text-center { text-align: center; }
.text-right { text-align: right; }