/* ============================================================
   ImpactMate v2 — Utility Classes
   Built on top of design-system.css tokens
   ============================================================ */

/* ─── Text Colors ─── */
.imm-text-primary   { color: var(--primary) !important; }
.imm-text-secondary { color: var(--text-secondary) !important; }
.imm-text-tertiary  { color: var(--text-tertiary) !important; }
.imm-text-success   { color: var(--success) !important; }
.imm-text-warning   { color: var(--warning) !important; }
.imm-text-danger    { color: var(--danger) !important; }
.imm-text-info      { color: var(--info) !important; }
.imm-text-inverse   { color: var(--text-inverse) !important; }
.imm-text-dark      { color: var(--text-primary) !important; }

/* ─── Background Colors ─── */
.imm-bg-primary     { background-color: var(--primary) !important; }
.imm-bg-primary-lt  { background-color: var(--primary-lighter) !important; }
.imm-bg-primary-sub { background-color: var(--primary-subtle) !important; }
.imm-bg-secondary   { background-color: var(--secondary) !important; }
.imm-bg-accent      { background-color: var(--accent) !important; }
.imm-bg-success     { background-color: var(--success) !important; }
.imm-bg-warning     { background-color: var(--warning) !important; }
.imm-bg-danger      { background-color: var(--danger) !important; }
.imm-bg-info        { background-color: var(--info) !important; }
.imm-bg-white       { background-color: var(--bg-white) !important; }
.imm-bg-body        { background-color: var(--bg-body) !important; }
.imm-bg-surface     { background-color: var(--bg-surface) !important; }

/* ─── Font Family ─── */
.imm-font-heading { font-family: var(--font-heading) !important; }
.imm-font-body    { font-family: var(--font-body) !important; }
.imm-font-mono    { font-family: var(--font-mono) !important; }

/* ─── Font Weight ─── */
.imm-fw-light     { font-weight: var(--font-light) !important; }
.imm-fw-regular   { font-weight: var(--font-regular) !important; }
.imm-fw-medium    { font-weight: var(--font-medium) !important; }
.imm-fw-semibold  { font-weight: var(--font-semibold) !important; }
.imm-fw-bold      { font-weight: var(--font-bold) !important; }
.imm-fw-extrabold { font-weight: var(--font-extrabold) !important; }

/* ─── Font Size ─── */
.imm-fs-xs   { font-size: var(--text-xs) !important; }
.imm-fs-sm   { font-size: var(--text-sm) !important; }
.imm-fs-base { font-size: var(--text-base) !important; }
.imm-fs-lg   { font-size: var(--text-lg) !important; }
.imm-fs-xl   { font-size: var(--text-xl) !important; }
.imm-fs-2xl  { font-size: var(--text-2xl) !important; }
.imm-fs-3xl  { font-size: var(--text-3xl) !important; }
.imm-fs-4xl  { font-size: var(--text-4xl) !important; }
.imm-fs-5xl  { font-size: var(--text-5xl) !important; }

/* ─── Border Radius ─── */
.imm-rounded-sm   { border-radius: var(--radius-sm) !important; }
.imm-rounded-md   { border-radius: var(--radius-md) !important; }
.imm-rounded-lg   { border-radius: var(--radius-lg) !important; }
.imm-rounded-xl   { border-radius: var(--radius-xl) !important; }
.imm-rounded-2xl  { border-radius: var(--radius-2xl) !important; }
.imm-rounded-full { border-radius: var(--radius-full) !important; }

/* ─── Box Shadow ─── */
.imm-shadow-xs  { box-shadow: var(--shadow-xs) !important; }
.imm-shadow-sm  { box-shadow: var(--shadow-sm) !important; }
.imm-shadow-md  { box-shadow: var(--shadow-md) !important; }
.imm-shadow-lg  { box-shadow: var(--shadow-lg) !important; }
.imm-shadow-xl  { box-shadow: var(--shadow-xl) !important; }
.imm-shadow-2xl { box-shadow: var(--shadow-2xl) !important; }
.imm-shadow-none { box-shadow: none !important; }

/* ─── Spacing (margin & padding) ─── */
/* Margin top */
.imm-mt-0  { margin-top: var(--space-0) !important; }
.imm-mt-1  { margin-top: var(--space-1) !important; }
.imm-mt-2  { margin-top: var(--space-2) !important; }
.imm-mt-3  { margin-top: var(--space-3) !important; }
.imm-mt-4  { margin-top: var(--space-4) !important; }
.imm-mt-6  { margin-top: var(--space-6) !important; }
.imm-mt-8  { margin-top: var(--space-8) !important; }
.imm-mt-10 { margin-top: var(--space-10) !important; }
.imm-mt-12 { margin-top: var(--space-12) !important; }

/* Margin bottom */
.imm-mb-0  { margin-bottom: var(--space-0) !important; }
.imm-mb-1  { margin-bottom: var(--space-1) !important; }
.imm-mb-2  { margin-bottom: var(--space-2) !important; }
.imm-mb-3  { margin-bottom: var(--space-3) !important; }
.imm-mb-4  { margin-bottom: var(--space-4) !important; }
.imm-mb-6  { margin-bottom: var(--space-6) !important; }
.imm-mb-8  { margin-bottom: var(--space-8) !important; }

/* Padding */
.imm-p-0  { padding: var(--space-0) !important; }
.imm-p-2  { padding: var(--space-2) !important; }
.imm-p-3  { padding: var(--space-3) !important; }
.imm-p-4  { padding: var(--space-4) !important; }
.imm-p-6  { padding: var(--space-6) !important; }
.imm-p-8  { padding: var(--space-8) !important; }

.imm-px-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
.imm-px-6 { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
.imm-py-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
.imm-py-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
.imm-py-6 { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }

/* Gap (for flex/grid) */
.imm-gap-1 { gap: var(--space-1) !important; }
.imm-gap-2 { gap: var(--space-2) !important; }
.imm-gap-3 { gap: var(--space-3) !important; }
.imm-gap-4 { gap: var(--space-4) !important; }
.imm-gap-6 { gap: var(--space-6) !important; }
.imm-gap-8 { gap: var(--space-8) !important; }

/* ─── Flexbox ─── */
.imm-flex         { display: flex !important; }
.imm-flex-col     { display: flex !important; flex-direction: column !important; }
.imm-flex-center  { display: flex !important; align-items: center !important; justify-content: center !important; }
.imm-flex-between { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.imm-flex-end     { display: flex !important; justify-content: flex-end !important; }
.imm-flex-wrap    { flex-wrap: wrap !important; }
.imm-flex-1       { flex: 1 !important; }
.imm-items-center { align-items: center !important; }
.imm-items-start  { align-items: flex-start !important; }

/* ─── Grid ─── */
.imm-grid      { display: grid !important; }
.imm-grid-2    { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; }
.imm-grid-3    { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; }
.imm-grid-4    { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; }

@media (max-width: 992px) {
    .imm-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
    .imm-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 768px) {
    .imm-grid-2,
    .imm-grid-3,
    .imm-grid-4 { grid-template-columns: 1fr !important; }
}

/* ─── Text Alignment ─── */
.imm-text-left   { text-align: left !important; }
.imm-text-center { text-align: center !important; }
.imm-text-right  { text-align: right !important; }

/* ─── Width & Height ─── */
.imm-w-full  { width: 100% !important; }
.imm-h-full  { height: 100% !important; }
.imm-max-w-sm  { max-width: 24rem !important; }
.imm-max-w-md  { max-width: 28rem !important; }
.imm-max-w-lg  { max-width: 32rem !important; }
.imm-max-w-xl  { max-width: 36rem !important; }
.imm-max-w-2xl { max-width: 42rem !important; }
.imm-max-w-4xl { max-width: 56rem !important; }

/* ─── Overflow ─── */
.imm-overflow-hidden { overflow: hidden !important; }
.imm-overflow-auto   { overflow: auto !important; }

/* ─── Cursor ─── */
.imm-cursor-pointer { cursor: pointer !important; }
.imm-cursor-default { cursor: default !important; }

/* ─── Transition ─── */
.imm-transition      { transition: all var(--transition-normal) !important; }
.imm-transition-fast { transition: all var(--transition-fast) !important; }
.imm-transition-slow { transition: all var(--transition-slow) !important; }

/* ─── Opacity ─── */
.imm-opacity-0   { opacity: 0 !important; }
.imm-opacity-50  { opacity: 0.5 !important; }
.imm-opacity-75  { opacity: 0.75 !important; }
.imm-opacity-100 { opacity: 1 !important; }

/* ─── Visibility ─── */
.imm-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ─── Truncate ─── */
.imm-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.imm-line-clamp-2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
}

.imm-line-clamp-3 {
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
}