/* ═════════════════════════════════════════════
   Utility Classes v5.1 — Semantic Composables
   ~130 classes in 18 sections — composable via decomposition engine
   Load order: after design-tokens.css, before feature CSS
   Strategy: atomic utilities compose to cover 95%+ of inline style patterns
   ═════════════════════════════════════════════ */

/* ── 1. Display ── */
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.grid         { display: grid; }
.block        { display: block; }
.inline-block { display: inline-block; }
.contents     { display: contents; }
.table-cell   { display: table-cell; }

/* ── 2. Flex children ── */
.flex-1       { flex: 1; }
.flex-col     { display: flex; flex-direction: column; }
.flex-col-gap { display: flex; flex-direction: column; gap: var(--space-3); }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-wrap    { flex-wrap: wrap; }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.items-end       { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.shrink-0        { flex-shrink: 0; }

/* ── 3. Gap ── */
.gap-xs  { gap: var(--space-1); }   /* 2px */
.gap-sm  { gap: var(--space-2); }   /* 4px */
.gap     { gap: var(--space-3); }   /* 8px */
.gap-md  { gap: var(--space-3); }   /* 12px — alias */
.gap-lg  { gap: var(--space-4); }   /* 16px */

/* ── 4. Panel & Card ── */
.panel {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.card-body {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.card-stat {
  flex: 1;
  min-width: 140px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: center;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-default);
}

/* ── 5. Background ── */
.bg-overlay    { background: var(--bg-overlay); }
.bg-card       { background: var(--bg-card); }
.bg-base       { background: var(--bg-base); }
.bg-accent     { background: var(--accent); }
.bg-success-soft { background: var(--success-soft); }
.bg-danger-soft  { background: var(--danger-soft); }
.bg-warning-soft { background: var(--warning-soft); }
.bg-info-soft    { background: var(--info-soft, color-mix(in srgb, var(--accent) 12%, transparent)); }
.bg-success-solid { background: var(--success); }
.bg-danger        { background: var(--danger); }
.bg-danger-solid  { background: var(--danger); }
.bg-warning       { background: var(--warning); }
.bg-warning-solid { background: var(--warning); }
.bg-none       { background: none; }

/* ── 6. Container ── */
.container    { max-width: 1440px; margin: 0 auto; padding: var(--space-6); }
.container-sm { max-width: 960px;  margin: 0 auto; padding: var(--space-6); }
.container-lg { max-width: 1280px; margin: 0 auto; padding: var(--space-6); }
.container-xl { max-width: 1440px; margin: 0 auto; padding: var(--space-6); }

/* ── 7. Spacing ── */
.pad       { padding: var(--space-3); }
.pad-xs    { padding: var(--space-1); }
.pad-sm    { padding: var(--space-2); }
.pad-lg    { padding: var(--space-4); }
.pad-xl    { padding: var(--space-5); }
.pad-2xl   { padding: var(--space-6); }

.mt-xs  { margin-top: var(--space-1); }
.mt-sm  { margin-top: var(--space-2); }
.mt-md  { margin-top: var(--space-3); }
.mt-lg  { margin-top: var(--space-4); }
.mt-xl  { margin-top: var(--space-5); }
.mt-2xl { margin-top: var(--space-6); }
.mb-sm  { margin-bottom: var(--space-2); }
.mb-md  { margin-bottom: var(--space-3); }
.mb-lg  { margin-bottom: var(--space-4); }
.mb-xl  { margin-bottom: var(--space-5); }
.mb-2xl { margin-bottom: var(--space-6); }
.mb-3xl { margin-bottom: var(--space-10); }
.ml-xs  { margin-left: var(--space-1); }
.ml-sm  { margin-left: var(--space-2); }
.ml-md  { margin-left: var(--space-3); }
.mr-sm  { margin-right: var(--space-2); }
.mr-md  { margin-right: var(--space-3); }

.m-0  { margin: 0; }
.p-0  { padding: 0; }
/* Directional zero reset (for compound decomposition) */
.mt-0 { margin-top: 0; }
.mr-0 { margin-right: 0; }
.mb-0 { margin-bottom: 0; }
.ml-0 { margin-left: 0; }
.pt-0 { padding-top: 0; }
.pr-0 { padding-right: 0; }
.pb-0 { padding-bottom: 0; }
.pl-0 { padding-left: 0; }

/* Directional padding (for compound decomposition) */
.pt-sm  { padding-top: var(--space-2); }
.pt-md  { padding-top: var(--space-3); }
.pt-lg  { padding-top: var(--space-4); }
.pr-sm  { padding-right: var(--space-2); }
.pr-md  { padding-right: var(--space-3); }
.pr-lg  { padding-right: var(--space-4); }
.pb-sm  { padding-bottom: var(--space-2); }
.pb-md  { padding-bottom: var(--space-3); }
.pb-lg  { padding-bottom: var(--space-4); }
.pl-sm  { padding-left: var(--space-2); }
.pl-md  { padding-left: var(--space-3); }
.pl-lg  { padding-left: var(--space-4); }

/* ── 8. Buttons ── */
.btn-accent {
  background: var(--accent);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
}
.btn-danger {
  background: var(--danger);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.btn-ghost {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
}
.btn-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-tertiary);
}
.btn-tab {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  color: var(--text-tertiary);
  transition: color var(--motion-fast), border-color var(--motion-fast);
}

/* ── 9. Table ── */
.table       { width: 100%; border-collapse: collapse; }
.th          { padding: 10px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); font-weight: 600; }
.td          { padding: 9px 12px; }
.td-r        { text-align: right; }
.td-nowrap   { white-space: nowrap; }
.td-c        { text-align: center; }
.td-w30      { width: 30px; padding: 10px 8px; }
.td-num      { font-variant-numeric: tabular-nums; text-align: right; }
.td-ellipsis { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 10. Form ── */
.input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: 13px;
  background: var(--bg-base);
  color: var(--text-primary);
}
.input-sm {
  padding: 6px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: 12px;
  background: var(--bg-base);
  color: var(--text-primary);
}
.select-sm {
  padding: 6px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: 12px;
  background: var(--bg-base);
  color: var(--text-primary);
}
.label {
  font-size: 12px;
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
  color: var(--text-secondary);
}
.field-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
}
.form-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: flex-end;
}
.textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: 13px;
  background: var(--bg-base);
  color: var(--text-primary);
  resize: vertical;
}

/* ── 11. Text — colors ── */
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary  { color: var(--text-tertiary); }
.text-accent    { color: var(--accent); }
.text-danger    { color: var(--danger); }
.text-success   { color: var(--success); }
.text-warning   { color: var(--warning); }
.text-inverse   { color: var(--text-inverse, #fff); }
.text-info      { color: var(--info, var(--accent)); }
.text-accent-emphasis { color: var(--accent-emphasis, var(--accent)); }
.text-content-primary { color: var(--content-primary); }
.text-content-tertiary { color: var(--content-tertiary); }

/* ── 12. Text — sizes & styles ── */
.text-2xs     { font-size: 11px; }
.text-xs      { font-size: var(--text-xs); }
.text-sm      { font-size: var(--text-sm); }
.text-body    { font-size: var(--text-base); }
.text-lg      { font-size: var(--text-lg); }
.text-xl      { font-size: var(--text-xl); }
.text-2xl     { font-size: var(--text-2xl); }

.fw-400       { font-weight: 400; }
.fw-500       { font-weight: 500; }
.fw-600       { font-weight: 600; }
.fw-700       { font-weight: 700; }

.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }

.text-nowrap       { white-space: nowrap; }
.text-truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-no-decoration { text-decoration: none; }
.uppercase         { text-transform: uppercase; }
.tabular-nums      { font-variant-numeric: tabular-nums; }
.font-mono         { font-family: var(--font-mono); }
.tracking-wide     { letter-spacing: 0.05em; }

/* ── 13. Text — composites (size + color + extras) ── */
.text-hint    { font-size: var(--text-sm); color: var(--text-tertiary); margin-top: 4px; }
.text-meta    { font-size: 11px; color: var(--text-tertiary); }
.text-overline { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; }

.page-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.page-subtitle {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin: 0 0 var(--space-4);
}
.section-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
}

/* ── 14. Borders ── */
.border       { border: 1px solid var(--border-default); }
.border-none  { border: none; }
.divider      { border-bottom: 1px solid var(--border-default); }
.divider-heavy { border-bottom: 2px solid var(--border-default); }
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-full { border-radius: 50%; }

/* ── 15. Layout ── */
.grid-2      { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.grid-3      { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.grid-4      { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.grid-cols-2 { display: grid; grid-template-columns: 1fr 1fr; }
.grid-cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); }
.cell-empty  { text-align: center; padding: 40px; color: var(--text-tertiary); }
.overflow-x  { overflow-x: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }
.col-full    { grid-column: 1 / -1; }
.w-full         { width: 100%; }
.cursor-pointer { cursor: pointer; }
.cursor-help    { cursor: help; }
.resize-vertical { resize: vertical; }
.opacity-70     { opacity: 0.7; }

/* ── 16. Chrome ── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.batch-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  margin-bottom: 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  font-size: 12px;
}

/* ── 17. Status & Alert ── */
.alert {
  padding: 10px 16px;
  border-radius: 8px;
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}
.alert-success { background: var(--success-soft); color: var(--success); }
.alert-danger  { background: var(--danger-soft);  color: var(--danger); }
.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
}
.pill-accent { background: var(--accent-soft); color: var(--accent); }

/* ── 18. Misc utilities (v5.2 extension) ── */
.min-w-140  { min-width: 140px; }
.min-w-160  { min-width: 160px; }
.min-w-200  { min-width: 200px; }
.lh-relaxed { line-height: 1.6; }
.lh-normal  { line-height: 1.5; }
.transition-border { transition: border-color var(--motion-fast); }
.shadow-sm  { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.border-dashed    { border: 2px dashed var(--border-default); }
.border-dashed-sm { border: 1px dashed var(--border-default); }
.relative         { position: relative; }

/* ── 19. Misc utilities (v5.3 extension) ── */
.h-full        { height: 100%; }
.transition-all { transition: all var(--motion-fast); }
.flex-dir-col  { flex-direction: column; }
.opacity-85    { opacity: 0.85; }
.opacity-80    { opacity: 0.8; }
.align-middle  { vertical-align: middle; }
.obj-cover     { object-fit: cover; }
.break-all     { word-break: break-all; }
.break-word    { word-break: break-word; overflow-wrap: break-word; }
.pre-wrap      { white-space: pre-wrap; }

/* ── Directional padding Y+X composites ── */
.py-xs { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-sm { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-md { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.px-sm { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-md { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-lg { padding-left: var(--space-4); padding-right: var(--space-4); }

/* ── Margin bottom extras ── */
.mb-xs { margin-bottom: var(--space-1); }

/* ── 20. Percentage widths ── */
.w-10 { width: 10%; }
.w-15 { width: 15%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-40 { width: 40%; }
.w-50 { width: 50%; }

/* ── 21. Grid template columns (atomic, for decomposition) ── */
.gtc-2   { grid-template-columns: 1fr 1fr; }
.gtc-3   { grid-template-columns: 1fr 1fr 1fr; }
.gtc-4   { grid-template-columns: repeat(4, 1fr); }
.gtc-5   { grid-template-columns: repeat(5, 1fr); }
.gtc-6   { grid-template-columns: repeat(6, 1fr); }
.gtc-2-1 { grid-template-columns: 2fr 1fr; }

/* ── 22. Extended directional padding/spacing (xl) ── */
.pt-xl { padding-top: var(--space-5); }
.pr-xl { padding-right: var(--space-5); }
.pb-xl { padding-bottom: var(--space-5); }
.pl-xl { padding-left: var(--space-5); }

/* ── 23. Font weight extras ── */
.fw-800 { font-weight: 800; }

/* ── 24. v5.4: Missing tokens & layout helpers ── */
.text-inverse  { color: var(--text-inverse); }
.bg-raised     { background: var(--bg-raised); }
.gap-xl        { gap: var(--space-5); }
.pr-2xl        { padding-right: var(--space-6); }
.pl-2xl        { padding-left: var(--space-6); }
.mr-lg         { margin-right: var(--space-4); }
.ml-lg         { margin-left: var(--space-4); }
.rounded-xl    { border-radius: var(--radius-xl); }
.w-60          { width: 60px; }
.w-30          { width: 30px; }
.w-40          { width: 40px; }
.w-80          { width: 80px; }
.w-130         { width: 130px; }
.w-28          { width: 28px; }
.w-95          { width: 95%; }
.min-w-80      { min-width: 80px; }
.min-w-60      { min-width: 60px; }
.min-w-260     { min-width: 260px; }
.min-w-480     { min-width: 480px; }
.max-w-200     { max-width: 200px; }
.max-w-480     { max-width: 480px; }
.max-w-600     { max-width: 600px; }
.h-300         { height: 300px; }
.h-28          { height: 28px; }
.lh-tight      { line-height: 1.2; }
.lh-loose      { line-height: 1.8; }
.text-3xl      { font-size: 36px; }
.text-4xl      { font-size: 40px; }
.opacity-60    { opacity: 0.6; }
.ml-auto       { margin-left: auto; }
.mt-120        { margin-top: 120px; }
.mt-1          { margin-top: 1px; }
.text-ellipsis { text-overflow: ellipsis; }
.pad-3xl       { padding: 48px; }
.py-xs         { padding-top: var(--space-1); padding-bottom: var(--space-1); }

/* ── 25. v5.5: Surface/content tokens + utilities + layout overrides ── */
.text-base              { font-size: var(--text-base); }
.rounded-xs             { border-radius: var(--radius-xs); }
/* Surface / Content token namespace */
.bg-surface-base        { background: var(--surface-base); }
.text-content-primary   { color: var(--content-primary); }
.text-content-tertiary  { color: var(--content-tertiary); }
/* Accent / Overlay / Input tokens */
.bg-accent-soft         { background: var(--accent-soft); }
.bg-overlay             { background: var(--bg-overlay); }
.bg-input               { background: var(--bg-input); }
.bg-base                { background: var(--bg-base); }
.bg-card                { background: var(--bg-card); }
.bg-raised              { background: var(--bg-raised); }
/* Utility properties */
.cursor-pointer         { cursor: pointer; }
.no-underline           { text-decoration: none; }
.overflow-hidden        { overflow: hidden; }
.overflow-y-auto        { overflow-y: auto; }
.overflow-x-auto        { overflow-x: auto; }
.border-collapse        { border-collapse: collapse; }
.uppercase              { text-transform: uppercase; }
.tracking-wide          { letter-spacing: 0.05em; }
.justify-center         { justify-content: center; }
.justify-between        { justify-content: space-between; }
.text-nowrap            { white-space: nowrap; }
.shadow-sm              { box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.border-t               { border-top: 1px solid var(--border-default); }
.border-b               { border-bottom: 1px solid var(--border-default); }
/* Transitions */
.transition-fast        { transition: all .12s; }
.transition             { transition: all .15s; }
/* Layout overrides (preserved raw px) */
.max-h-30               { max-height: 30px; }
.max-h-28               { max-height: 28px; }
.max-h-90vh             { max-height: 90vh; }
.text-left              { text-align: left; }

/* ── 26. v5.6: Directional padding + margin (for shorthand decomposition) ── */
/* dir-padding */
.pt-xs          { padding-top: var(--space-1); }
.pt-sm          { padding-top: var(--space-2); }
.pt-md          { padding-top: var(--space-3); }
.pr-md          { padding-right: var(--space-3); }
.pr-lg          { padding-right: var(--space-4); }
.pb-xs          { padding-bottom: var(--space-1); }
.pb-sm          { padding-bottom: var(--space-2); }
.pb-md          { padding-bottom: var(--space-3); }
.pl-md          { padding-left: var(--space-3); }
.pl-lg          { padding-left: var(--space-4); }
/* dir-margin */
.mt-xs          { margin-top: var(--space-1); }
.mt-sm          { margin-top: var(--space-2); }
.mt             { margin-top: var(--space-3); }
.mt-lg          { margin-top: var(--space-4); }
.mt-xl          { margin-top: var(--space-5); }
.mt-120         { margin-top: 120px; }
.mr-sm          { margin-right: var(--space-2); }
.mr             { margin-right: var(--space-3); }
.mb-sm          { margin-bottom: var(--space-2); }
.mb             { margin-bottom: var(--space-3); }
.mb-lg          { margin-bottom: var(--space-4); }
.mb-xl          { margin-bottom: var(--space-5); }
.ml-sm          { margin-left: var(--space-2); }
.ml             { margin-left: var(--space-3); }
/* Font sizes (normalized tokens) */
.text-2xs       { font-size: 10px; }
.text-base      { font-size: 14px; }
.text-3xl       { font-size: 36px; }
.text-4xl       { font-size: 40px; }

/* ── 27. v5.6: Partial decomposition enablers (position, z-index, dimensions, borders, animations) ── */
/* Position */
.sticky                  { position: sticky; }
.absolute                { position: absolute; }
.fixed                   { position: fixed; }
.top-0                   { top: 0; }
.left-0                  { left: 0; }
.right-0                 { right: 0; }
.bottom-0                { bottom: 0; }
.z-100                   { z-index: 100; }
.z-10                    { z-index: 10; }
.z-1                     { z-index: 1; }
/* Gap */
.gap-0                   { gap: 0; }
.gap-xs                  { gap: var(--space-1); }
/* Min dimensions */
.min-w-0                 { min-width: 0; }
.min-h-56                { min-height: 56px; }
/* Form controls */
.checkbox-sm              { height: 16px; width: 16px; }
/* Width px */
.w-24                    { width: 24px; }
.w-10                    { width: 10px; }
.w-14                    { width: 14px; }
.w-18                    { width: 18px; }
.w-90                    { width: 90%; }
.w-30pct                 { width: 30%; }
.w-60pct                 { width: 60%; }
.w-240                   { width: 240px; }
.w-300                   { width: 300px; }
/* Height px */
.h-4                     { height: 4px; }
.h-3                     { height: 3px; }
.h-6                     { height: 6px; }
.h-10                    { height: 10px; }
.h-12                    { height: 12px; }
.h-40                    { height: 40px; }
.h-screen                { height: 100vh; }
/* Border-radius raw px */
.rounded-2               { border-radius: 2px; }
.rounded-3               { border-radius: 3px; }
.rounded-4               { border-radius: 4px; }
.rounded-6               { border-radius: 6px; }
/* Line-height */
.lh-1                    { line-height: 1; }
.lh-tight                { line-height: 1.08; }
/* Margin auto */
.m-0-auto                { margin: 0 auto; }
.mr-auto                 { margin-right: auto; }
.ml-auto                 { margin-left: auto; }
/* Padding shorthands */
.py-2                    { padding-top: 2px; padding-bottom: 2px; }
.px-sm                   { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-md                   { padding-left: var(--space-3); padding-right: var(--space-3); }
.py-sm                   { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.px-lg                   { padding-left: var(--space-4); padding-right: var(--space-4); }
.py-md                   { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.px-xl                   { padding-left: var(--space-5); padding-right: var(--space-5); }
/* Margin shorthands */
.my-2                    { margin-top: 2px; margin-bottom: 2px; }
.mx-sm                   { margin-left: var(--space-2); margin-right: var(--space-2); }
.my-sm                   { margin-top: var(--space-2); margin-bottom: var(--space-2); }
/* Flex */
.flex-nowrap             { flex-wrap: nowrap; }
/* Transition */
.transition-200          { transition: all .2s; }
.transition-width        { transition: width .2s; }
.transition-opacity      { transition: opacity var(--motion-fast); }
/* Animation */
.anim-delay-150          { animation-delay: .15s; }
.anim-delay-200          { animation-delay: .2s; }
/* Object fit */
.obj-contain             { object-fit: contain; }
.obj-pos-center          { object-position: center; }
/* Border variants */
.border-accent           { border: 2px solid var(--accent); }
.border-l-3-transparent  { border-left: 3px solid transparent; }
.border-l-success         { border-left-color: var(--success); }
.border-l-danger          { border-left-color: var(--danger); }
/* Background */
.bg-surface-raised       { background: var(--surface-raised); }
/* Overflow */
.overflow-visible        { overflow: visible; }
/* User select / pointer events */
.select-none             { user-select: none; }
.pointer-events-none     { pointer-events: none; }
.invisible               { visibility: hidden; }
/* Vertical align */
.align-top               { vertical-align: top; }
.align-middle            { vertical-align: middle; }
.align-bottom            { vertical-align: bottom; }

/* ── 28. v5.7: Final push to cross <500 inline barrier ── */
.text-white              { color: var(--text-inverse); }
.text-slate              { color: #64748b; }           /* slate-500, used in status badges */
.w-fit                   { width: fit-content; }
.text-display            { font-size: var(--text-display); }

/* ── 29. v5.8/5.9: Clean up remaining inline patterns ── */
.text-content-secondary   { color: var(--content-secondary); }
.border-warning           { border: 1px solid var(--warning); }
.border-accent-1          { border: 1px solid var(--accent); }
.outline-none             { outline: none; }
.bg-info                  { background: var(--info); }
.bg-success               { background: var(--success); }
.bg-surface-raised        { background: var(--surface-raised); }
.text-xl                  { font-size: var(--text-xl); }
.text-lg                  { font-size: var(--text-lg); }
.text-sm                  { font-size: var(--text-sm); }
.justify-end              { justify-content: flex-end; }
.pt-2xl                   { padding-top: var(--space-6); }
.pb-2xl                   { padding-bottom: var(--space-6); }
.pt-32                    { padding-top: var(--space-8); }
.pb-32                    { padding-bottom: var(--space-8); }
.pt-40                    { padding-top: var(--space-10); }
.pb-40                    { padding-bottom: var(--space-10); }
.pt-64                    { padding-top: var(--space-16); }
.pb-64                    { padding-bottom: var(--space-16); }
.pr-32                    { padding-right: var(--space-8); }
.pl-32                    { padding-left: var(--space-8); }
.pr-40                    { padding-right: var(--space-10); }
.pl-40                    { padding-left: var(--space-10); }
.pr-xs                    { padding-right: var(--space-1); }
.pl-xs                    { padding-left: var(--space-1); }
.max-w-full               { max-width: 100%; }
.max-w-180                { max-width: 180px; }
.max-w-280                { max-width: 280px; }
.max-w-300                { max-width: 300px; }
.max-w-700                { max-width: 700px; }
.min-h-0                  { min-height: 0; }
.w-120                    { width: 120px; }
.h-8                      { height: 8px; }
.h-80                     { height: 80px; }
.text-dark-blue           { color: #1a1a2e; }
.text-indigo              { color: #6366f1; }
.text-color-accent        { color: var(--color-accent); }
/* Position */
.right-md                 { right: var(--space-3); }
.top-md                   { top: var(--space-3); }
/* Typography */
.tracking-wide            { letter-spacing: 0.5px; }
.font-mono                { font-family: var(--font-mono, monospace); }
/* Border */
.border-sidebar           { border: 1px solid var(--sidebar-border); }
/* Layout */
.container-max            { max-width: var(--container-max, 1280px); }
/* ── 30. v5.10: Gap + surface overlay + hex fallbacks ── */
.bg-surface-overlay       { background: var(--surface-overlay); }
.bg-slate-50              { background: #f8fafc; }
.bg-white                 { background: #fff; }
.text-slate-400           { color: #94a3b8; }
.text-slate-600           { color: #475569; }
.gap-2xl                  { gap: var(--space-6); }
.gap-xl                   { gap: var(--space-4); }
.gap-lg                   { gap: var(--space-3); }
.gap-md                   { gap: var(--space-2); }
.gap-sm                   { gap: var(--space-1); }
.gap-32                   { gap: var(--space-8); }
.max-w-560                { max-width: 560px; }
.flex-col                 { flex-direction: column; }
/* ── 30. v5.11: Generic single-property patterns ── */
.overflow-auto            { overflow: auto; }
.shadow-lg                { box-shadow: var(--shadow-lg); }
.shadow-md                { box-shadow: var(--shadow-md); }
.shadow-none              { box-shadow: none; }
.z-9999                   { z-index: 9999; }
.z-5                      { z-index: 5; }
.z-2                      { z-index: 2; }
.z-50                     { z-index: 50; }
.transition-opacity       { transition: opacity .15s; }
.transition-fast          { transition: all var(--motion-fast); }
.transition-color         { transition: color var(--motion-fast); }
.transition-border        { transition: border-color var(--motion-fast); }
.transition-bg            { transition: background var(--motion-fast); }
.translatex-center        { transform: translateX(-50%); }
.translate-center         { transform: translate(-50%, -50%); }
.translatey-center        { transform: translateY(-50%); }
.left-50p                 { left: 50%; }
.top-50p                  { top: 50%; }
.lh-2                     { line-height: 2; }
.lh-loose                 { line-height: 2.5; }
.lh-tight                 { line-height: 1.1; }
.col-span-full            { grid-column: 1 / -1; }
.animate-pulse            { animation: pulse 2s infinite; }
.underline                { text-decoration: underline; }
/* ── 31. v5.12: Final generic entries ── */
.top-0                    { top: 0; }
.right-0                  { right: 0; }
.bottom-0                 { bottom: 0; }
.left-0                   { left: 0; }
.grid-cols-4              { grid-template-columns: 1fr 1fr 1fr 1fr; }
.max-w-400                { max-width: 400px; }
.max-h-300                { max-height: 300px; }
.opacity-50               { opacity: .5; }
.opacity-70               { opacity: .7; }
.tabular-nums             { font-variant-numeric: tabular-nums; }
.scrollbar-none           { scrollbar-width: none; }
.flex-1                   { flex: 1; }
.flex-none                { flex: 0 0 auto; }

/* ── 32. v5.13: Final inline style migration — pagination/tabs/wizard/banners ── */
.pagination-link           { display: inline-flex; align-items: center; justify-content: center;
                             min-width: 32px; height: 32px; border-radius: var(--radius-sm);
                             text-decoration: none; font-weight: var(--font-medium); }
.tabs-link                 { padding: 6px 16px; border-radius: var(--radius-sm, 6px);
                             font-size: var(--text-sm); font-weight: var(--font-medium);
                             cursor: pointer; text-decoration: none;
                             transition: all var(--motion-fast); }
.wizard-step-bar           { height: 2px; min-width: 24px; }
.bg-warning-muted-border   { background: var(--bg-warning-muted, #fff8e1);
                             border: 1px solid var(--border-warning, #ffc107); }
.bg-success-muted-border   { background: var(--bg-success-muted, #e8f5e9);
                             border: 1px solid var(--border-success, #4caf50); }
.dashboard-action-btn      { padding: 4px 12px; border-radius: 4px; font-size: 11px;
                             font-weight: 600; cursor: pointer; white-space: nowrap;
                             transition: all .12s; }
.dashboard-attention-item  { transition: background .1s; }
.shadow-glow               { box-shadow: 0 4px 24px rgba(0, 82, 255, .15); }
.pricing-badge-top         { top: -12px; }
.bg-surface-muted          { background: var(--bg-surface); } /* same token, class name */
.ai-badge-subtle           { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.text-nowrap               { white-space: nowrap; }
.list-style-none           { list-style: none; }
.min-w-0                   { min-width: 0; }
.hover-opacity             { opacity: 0; }
.hover-opacity:hover,
.hover-opacity:focus-within { opacity: 1; }
.w-6px                     { width: 6px; }
.h-6px                     { height: 6px; }

/* ── 33. Override layer (load last — highest priority) ── */
.d-none       { display: none; }
.visible      { visibility: visible; }

/* ═══ Dark Theme Overrides (html.dark) ═══ */
/* Hardcoded hex utilities get dark-mode equivalents */
html.dark .text-slate       { color: #94a3b8; }        /* slate-400, brighter for dark */
html.dark .text-dark-blue   { color: #e2e8f0; }        /* slate-200, readable on dark */
html.dark .text-indigo      { color: #a5b4fc; }        /* indigo-300 */
html.dark .text-slate-400   { color: #cbd5e1; }        /* slate-300 */
html.dark .text-slate-600   { color: #e2e8f0; }        /* slate-200 */
html.dark .bg-slate-50      { background: #1e293b; }   /* slate-800 */
html.dark .bg-white         { background: var(--bg-card); }