/* =============================================================================
   PrivatePay — UI Utility System
   Prefix  : ui-
   Token   : --space (0.25rem = 4px), design tokens from style.css
   Breakpoints: sm 640 / md 768 / lg 1024 / xl 1280
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Display
   --------------------------------------------------------------------------- */
.ui-flex         { display: flex; }
.ui-inline-flex  { display: inline-flex; }
.ui-grid         { display: grid; }
.ui-block        { display: block; }
.ui-inline-block { display: inline-block; }
.ui-inline       { display: inline; }
.ui-hidden       { display: none !important; }

/* ---------------------------------------------------------------------------
   Flexbox — direction
   --------------------------------------------------------------------------- */
.ui-flex-row         { flex-direction: row; }
.ui-flex-row-reverse { flex-direction: row-reverse; }
.ui-flex-col         { flex-direction: column; }
.ui-flex-col-reverse { flex-direction: column-reverse; }

/* Flex — wrap */
.ui-flex-wrap   { flex-wrap: wrap; }
.ui-flex-nowrap { flex-wrap: nowrap; }

/* Flex — justify */
.ui-justify-start   { justify-content: flex-start; }
.ui-justify-center  { justify-content: center; }
.ui-justify-end     { justify-content: flex-end; }
.ui-justify-between { justify-content: space-between; }
.ui-justify-around  { justify-content: space-around; }

/* Flex — align items */
.ui-items-start   { align-items: flex-start; }
.ui-items-center  { align-items: center; }
.ui-items-end     { align-items: flex-end; }
.ui-items-stretch { align-items: stretch; }

/* Flex — align self */
.ui-self-start   { align-self: flex-start; }
.ui-self-center  { align-self: center; }
.ui-self-end     { align-self: flex-end; }
.ui-self-stretch { align-self: stretch; }

/* Flex — grow / shrink */
.ui-flex-1    { flex: 1; }
.ui-flex-auto { flex: auto; }
.ui-flex-none { flex: none; }
.ui-shrink-0  { flex-shrink: 0; }
.ui-grow-1    { flex-grow: 1; }

/* Gap */
.ui-gap-0  { gap: 0; }
.ui-gap-1  { gap: calc(var(--space) * 1); }   /* 4px  */
.ui-gap-2  { gap: calc(var(--space) * 2); }   /* 8px  */
.ui-gap-3  { gap: calc(var(--space) * 3); }   /* 12px */
.ui-gap-4  { gap: calc(var(--space) * 4); }   /* 16px */
.ui-gap-5  { gap: calc(var(--space) * 5); }   /* 20px */
.ui-gap-6  { gap: calc(var(--space) * 6); }   /* 24px */
.ui-gap-8  { gap: calc(var(--space) * 8); }   /* 32px */
.ui-gap-10 { gap: calc(var(--space) * 10); }  /* 40px */
.ui-gap-12 { gap: calc(var(--space) * 12); }  /* 48px */

.ui-row-gap-2 { row-gap: calc(var(--space) * 2); }  /* 8px  */
.ui-row-gap-4 { row-gap: calc(var(--space) * 4); }  /* 16px */
.ui-col-gap-2 { column-gap: calc(var(--space) * 2); } /* 8px  */
.ui-col-gap-4 { column-gap: calc(var(--space) * 4); } /* 16px */

/* ---------------------------------------------------------------------------
   Grid
   --------------------------------------------------------------------------- */
.ui-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.ui-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ui-grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
.ui-grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.ui-grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.ui-grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }

.ui-col-span-1    { grid-column: span 1; }
.ui-col-span-2    { grid-column: span 2; }
.ui-col-span-3    { grid-column: span 3; }
.ui-col-span-4    { grid-column: span 4; }
.ui-col-span-full { grid-column: 1 / -1; }

/* ---------------------------------------------------------------------------
   Width / Height
   --------------------------------------------------------------------------- */
.ui-w-full   { width: 100%; }
.ui-w-fit    { width: fit-content; }
.ui-w-screen { width: 100vw; }
.ui-w-25     { width: 25%; }
.ui-w-33     { width: 33.333%; }
.ui-w-50     { width: 50%; }
.ui-w-66     { width: 66.666%; }
.ui-w-75     { width: 75%; }

.ui-h-full   { height: 100%; }
.ui-h-fit    { height: fit-content; }
.ui-h-screen { height: 100vh; }
.ui-h-auto   { height: auto; }

.ui-min-w-0  { min-width: 0; }

.ui-max-w-sm   { max-width: 24rem; }
.ui-max-w-md   { max-width: 28rem; }
.ui-max-w-lg   { max-width: 32rem; }
.ui-max-w-xl   { max-width: 36rem; }
.ui-max-w-2xl  { max-width: 42rem; }
.ui-max-w-3xl  { max-width: 48rem; }
.ui-max-w-full { max-width: 100%; }

/* ---------------------------------------------------------------------------
   Padding
   --------------------------------------------------------------------------- */
.ui-p-0  { padding: 0; }
.ui-p-1  { padding: calc(var(--space) * 1); }  /* 4px  */
.ui-p-2  { padding: calc(var(--space) * 2); }  /* 8px  */
.ui-p-3  { padding: calc(var(--space) * 3); }  /* 12px */
.ui-p-4  { padding: calc(var(--space) * 4); }  /* 16px */
.ui-p-5  { padding: calc(var(--space) * 5); }  /* 20px */
.ui-p-6  { padding: calc(var(--space) * 6); }  /* 24px */
.ui-p-8  { padding: calc(var(--space) * 8); }  /* 32px */
.ui-p-10 { padding: calc(var(--space) * 10); } /* 40px */
.ui-p-12 { padding: calc(var(--space) * 12); } /* 48px */
.ui-p-15 { padding: calc(var(--space) * 15); } /* 60px */

/* Padding X (left + right) */
.ui-px-0  { padding-left: 0; padding-right: 0; }
.ui-px-1  { padding-left: calc(var(--space) * 1);  padding-right: calc(var(--space) * 1); }  /* 4px  */
.ui-px-2  { padding-left: calc(var(--space) * 2);  padding-right: calc(var(--space) * 2); }  /* 8px  */
.ui-px-3  { padding-left: calc(var(--space) * 3);  padding-right: calc(var(--space) * 3); }  /* 12px */
.ui-px-4  { padding-left: calc(var(--space) * 4);  padding-right: calc(var(--space) * 4); }  /* 16px */
.ui-px-5  { padding-left: calc(var(--space) * 5);  padding-right: calc(var(--space) * 5); }  /* 20px */
.ui-px-6  { padding-left: calc(var(--space) * 6);  padding-right: calc(var(--space) * 6); }  /* 24px */
.ui-px-8  { padding-left: calc(var(--space) * 8);  padding-right: calc(var(--space) * 8); }  /* 32px */
.ui-px-10 { padding-left: calc(var(--space) * 10); padding-right: calc(var(--space) * 10); } /* 40px */
.ui-px-12 { padding-left: calc(var(--space) * 12); padding-right: calc(var(--space) * 12); } /* 48px */

/* Padding Y (top + bottom) */
.ui-py-0  { padding-top: 0; padding-bottom: 0; }
.ui-py-1  { padding-top: calc(var(--space) * 1);  padding-bottom: calc(var(--space) * 1); }  /* 4px  */
.ui-py-2  { padding-top: calc(var(--space) * 2);  padding-bottom: calc(var(--space) * 2); }  /* 8px  */
.ui-py-3  { padding-top: calc(var(--space) * 3);  padding-bottom: calc(var(--space) * 3); }  /* 12px */
.ui-py-4  { padding-top: calc(var(--space) * 4);  padding-bottom: calc(var(--space) * 4); }  /* 16px */
.ui-py-5  { padding-top: calc(var(--space) * 5);  padding-bottom: calc(var(--space) * 5); }  /* 20px */
.ui-py-6  { padding-top: calc(var(--space) * 6);  padding-bottom: calc(var(--space) * 6); }  /* 24px */
.ui-py-8  { padding-top: calc(var(--space) * 8);  padding-bottom: calc(var(--space) * 8); }  /* 32px */
.ui-py-10 { padding-top: calc(var(--space) * 10); padding-bottom: calc(var(--space) * 10); } /* 40px */
.ui-py-12 { padding-top: calc(var(--space) * 12); padding-bottom: calc(var(--space) * 12); } /* 48px */
.ui-py-15 { padding-top: calc(var(--space) * 15); padding-bottom: calc(var(--space) * 15); } /* 60px */

/* Padding Top */
.ui-pt-0  { padding-top: 0; }
.ui-pt-1  { padding-top: calc(var(--space) * 1); }  /* 4px  */
.ui-pt-2  { padding-top: calc(var(--space) * 2); }  /* 8px  */
.ui-pt-3  { padding-top: calc(var(--space) * 3); }  /* 12px */
.ui-pt-4  { padding-top: calc(var(--space) * 4); }  /* 16px */
.ui-pt-5  { padding-top: calc(var(--space) * 5); }  /* 20px */
.ui-pt-6  { padding-top: calc(var(--space) * 6); }  /* 24px */
.ui-pt-8  { padding-top: calc(var(--space) * 8); }  /* 32px */
.ui-pt-10 { padding-top: calc(var(--space) * 10); } /* 40px */
.ui-pt-12 { padding-top: calc(var(--space) * 12); } /* 48px */
.ui-pt-15 { padding-top: calc(var(--space) * 15); } /* 60px */

/* Padding Bottom */
.ui-pb-0  { padding-bottom: 0; }
.ui-pb-1  { padding-bottom: calc(var(--space) * 1); }  /* 4px  */
.ui-pb-2  { padding-bottom: calc(var(--space) * 2); }  /* 8px  */
.ui-pb-3  { padding-bottom: calc(var(--space) * 3); }  /* 12px */
.ui-pb-4  { padding-bottom: calc(var(--space) * 4); }  /* 16px */
.ui-pb-5  { padding-bottom: calc(var(--space) * 5); }  /* 20px */
.ui-pb-6  { padding-bottom: calc(var(--space) * 6); }  /* 24px */
.ui-pb-8  { padding-bottom: calc(var(--space) * 8); }  /* 32px */
.ui-pb-10 { padding-bottom: calc(var(--space) * 10); } /* 40px */
.ui-pb-12 { padding-bottom: calc(var(--space) * 12); } /* 48px */
.ui-pb-15 { padding-bottom: calc(var(--space) * 15); } /* 60px */

/* Padding Left */
.ui-pl-0  { padding-left: 0; }
.ui-pl-1  { padding-left: calc(var(--space) * 1); }  /* 4px  */
.ui-pl-2  { padding-left: calc(var(--space) * 2); }  /* 8px  */
.ui-pl-3  { padding-left: calc(var(--space) * 3); }  /* 12px */
.ui-pl-4  { padding-left: calc(var(--space) * 4); }  /* 16px */
.ui-pl-5  { padding-left: calc(var(--space) * 5); }  /* 20px */
.ui-pl-6  { padding-left: calc(var(--space) * 6); }  /* 24px */
.ui-pl-8  { padding-left: calc(var(--space) * 8); }  /* 32px */
.ui-pl-10 { padding-left: calc(var(--space) * 10); } /* 40px */
.ui-pl-12 { padding-left: calc(var(--space) * 12); } /* 48px */

/* Padding Right */
.ui-pr-0  { padding-right: 0; }
.ui-pr-1  { padding-right: calc(var(--space) * 1); }  /* 4px  */
.ui-pr-2  { padding-right: calc(var(--space) * 2); }  /* 8px  */
.ui-pr-3  { padding-right: calc(var(--space) * 3); }  /* 12px */
.ui-pr-4  { padding-right: calc(var(--space) * 4); }  /* 16px */
.ui-pr-5  { padding-right: calc(var(--space) * 5); }  /* 20px */
.ui-pr-6  { padding-right: calc(var(--space) * 6); }  /* 24px */
.ui-pr-8  { padding-right: calc(var(--space) * 8); }  /* 32px */
.ui-pr-10 { padding-right: calc(var(--space) * 10); } /* 40px */
.ui-pr-12 { padding-right: calc(var(--space) * 12); } /* 48px */

/* ---------------------------------------------------------------------------
   Margin
   --------------------------------------------------------------------------- */
.ui-m-0   { margin: 0; }
.ui-m-1   { margin: calc(var(--space) * 1); }  /* 4px  */
.ui-m-2   { margin: calc(var(--space) * 2); }  /* 8px  */
.ui-m-3   { margin: calc(var(--space) * 3); }  /* 12px */
.ui-m-4   { margin: calc(var(--space) * 4); }  /* 16px */
.ui-m-5   { margin: calc(var(--space) * 5); }  /* 20px */
.ui-m-6   { margin: calc(var(--space) * 6); }  /* 24px */
.ui-m-8   { margin: calc(var(--space) * 8); }  /* 32px */
.ui-m-10  { margin: calc(var(--space) * 10); } /* 40px */
.ui-m-12  { margin: calc(var(--space) * 12); } /* 48px */

/* Margin X */
.ui-mx-0    { margin-left: 0; margin-right: 0; }
.ui-mx-1    { margin-left: calc(var(--space) * 1);  margin-right: calc(var(--space) * 1); }  /* 4px  */
.ui-mx-2    { margin-left: calc(var(--space) * 2);  margin-right: calc(var(--space) * 2); }  /* 8px  */
.ui-mx-3    { margin-left: calc(var(--space) * 3);  margin-right: calc(var(--space) * 3); }  /* 12px */
.ui-mx-4    { margin-left: calc(var(--space) * 4);  margin-right: calc(var(--space) * 4); }  /* 16px */
.ui-mx-6    { margin-left: calc(var(--space) * 6);  margin-right: calc(var(--space) * 6); }  /* 24px */
.ui-mx-8    { margin-left: calc(var(--space) * 8);  margin-right: calc(var(--space) * 8); }  /* 32px */
.ui-mx-auto { margin-left: auto; margin-right: auto; }

/* Margin Y */
.ui-my-0    { margin-top: 0; margin-bottom: 0; }
.ui-my-1    { margin-top: calc(var(--space) * 1);  margin-bottom: calc(var(--space) * 1); }  /* 4px  */
.ui-my-2    { margin-top: calc(var(--space) * 2);  margin-bottom: calc(var(--space) * 2); }  /* 8px  */
.ui-my-3    { margin-top: calc(var(--space) * 3);  margin-bottom: calc(var(--space) * 3); }  /* 12px */
.ui-my-4    { margin-top: calc(var(--space) * 4);  margin-bottom: calc(var(--space) * 4); }  /* 16px */
.ui-my-6    { margin-top: calc(var(--space) * 6);  margin-bottom: calc(var(--space) * 6); }  /* 24px */
.ui-my-8    { margin-top: calc(var(--space) * 8);  margin-bottom: calc(var(--space) * 8); }  /* 32px */
.ui-my-auto { margin-top: auto; margin-bottom: auto; }

/* Margin Top */
.ui-mt-0    { margin-top: 0; }
.ui-mt-1    { margin-top: calc(var(--space) * 1); }  /* 4px  */
.ui-mt-2    { margin-top: calc(var(--space) * 2); }  /* 8px  */
.ui-mt-3    { margin-top: calc(var(--space) * 3); }  /* 12px */
.ui-mt-4    { margin-top: calc(var(--space) * 4); }  /* 16px */
.ui-mt-5    { margin-top: calc(var(--space) * 5); }  /* 20px */
.ui-mt-6    { margin-top: calc(var(--space) * 6); }  /* 24px */
.ui-mt-8    { margin-top: calc(var(--space) * 8); }  /* 32px */
.ui-mt-10   { margin-top: calc(var(--space) * 10); } /* 40px */
.ui-mt-12   { margin-top: calc(var(--space) * 12); } /* 48px */
.ui-mt-auto { margin-top: auto; }

/* Margin Bottom */
.ui-mb-0    { margin-bottom: 0; }
.ui-mb-1    { margin-bottom: calc(var(--space) * 1); }  /* 4px  */
.ui-mb-2    { margin-bottom: calc(var(--space) * 2); }  /* 8px  */
.ui-mb-3    { margin-bottom: calc(var(--space) * 3); }  /* 12px */
.ui-mb-4    { margin-bottom: calc(var(--space) * 4); }  /* 16px */
.ui-mb-5    { margin-bottom: calc(var(--space) * 5); }  /* 20px */
.ui-mb-6    { margin-bottom: calc(var(--space) * 6); }  /* 24px */
.ui-mb-8    { margin-bottom: calc(var(--space) * 8); }  /* 32px */
.ui-mb-10   { margin-bottom: calc(var(--space) * 10); } /* 40px */
.ui-mb-12   { margin-bottom: calc(var(--space) * 12); } /* 48px */
.ui-mb-auto { margin-bottom: auto; }

/* Margin Left */
.ui-ml-0    { margin-left: 0; }
.ui-ml-1    { margin-left: calc(var(--space) * 1); }  /* 4px  */
.ui-ml-2    { margin-left: calc(var(--space) * 2); }  /* 8px  */
.ui-ml-3    { margin-left: calc(var(--space) * 3); }  /* 12px */
.ui-ml-4    { margin-left: calc(var(--space) * 4); }  /* 16px */
.ui-ml-6    { margin-left: calc(var(--space) * 6); }  /* 24px */
.ui-ml-8    { margin-left: calc(var(--space) * 8); }  /* 32px */
.ui-ml-auto { margin-left: auto; }

/* Margin Right */
.ui-mr-0    { margin-right: 0; }
.ui-mr-1    { margin-right: calc(var(--space) * 1); }  /* 4px  */
.ui-mr-2    { margin-right: calc(var(--space) * 2); }  /* 8px  */
.ui-mr-3    { margin-right: calc(var(--space) * 3); }  /* 12px */
.ui-mr-4    { margin-right: calc(var(--space) * 4); }  /* 16px */
.ui-mr-6    { margin-right: calc(var(--space) * 6); }  /* 24px */
.ui-mr-8    { margin-right: calc(var(--space) * 8); }  /* 32px */
.ui-mr-auto { margin-right: auto; }

/* ---------------------------------------------------------------------------
   Typography — Size
   Maps to fluid tokens from style.css
   --------------------------------------------------------------------------- */
.ui-text-xxs  { font-size: 10px; }
.ui-text-xs   { font-size: var(--text-xs); }    /* 12px */
.ui-text-sm   { font-size: var(--text-sm); }    /* 14px */
.ui-text-base { font-size: var(--text-base); }  /* 16px */
.ui-text-lg   { font-size: var(--text-lg); }    /* clamp 18–20px */
.ui-text-xl   { font-size: var(--text-xl); }    /* clamp 20–24px */
.ui-text-2xl  { font-size: var(--text-2xl); }   /* clamp 24–32px */
.ui-text-3xl  { font-size: var(--text-3xl); }   /* clamp 32–40px */
.ui-text-4xl  { font-size: var(--text-4xl); }   /* clamp 40–48px */

/* Typography — Weight */
.ui-font-regular  { font-weight: var(--font-w-regular); }
.ui-font-medium   { font-weight: var(--font-w-medium); }
.ui-font-semibold { font-weight: var(--font-w-semibold); }
.ui-font-bold     { font-weight: var(--font-w-bold); }

/* Typography — Family */
.ui-font-neue  { font-family: var(--pp-neue-font), sans-serif; }
.ui-font-brown { font-family: var(--pp-brown-font), sans-serif; }
.ui-font-mont  { font-family: var(--pp-mont-font), sans-serif; }
.ui-font-inter { font-family: var(--pp-inter-font), sans-serif; }

/* Typography — Line height */
.ui-leading-100  { line-height: 1; }
.ui-leading-110  { line-height: 1.1; }
.ui-leading-120  { line-height: 1.2; }
.ui-leading-140  { line-height: 1.4; }
.ui-leading-tight  { line-height: var(--leading-tight); }
.ui-leading-normal { line-height: var(--leading-normal); }
.ui-leading-loose  { line-height: var(--leading-loose); }

/* Typography — Alignment */
.ui-text-left    { text-align: left; }
.ui-text-center  { text-align: center; }
.ui-text-right   { text-align: right; }
.ui-text-justify { text-align: justify; }

/* Typography — Transform */
.ui-uppercase   { text-transform: uppercase; }
.ui-lowercase   { text-transform: lowercase; }
.ui-capitalize  { text-transform: capitalize; }
.ui-normal-case { text-transform: none; }

/* Typography — Decoration */
.ui-underline    { text-decoration: underline; }
.ui-no-underline { text-decoration: none; }
.ui-line-through { text-decoration: line-through; }

/* Typography — Whitespace */
.ui-whitespace-nowrap   { white-space: nowrap; }
.ui-whitespace-pre-wrap { white-space: pre-wrap; }
.ui-whitespace-normal   { white-space: normal; }

/* Typography — Overflow */
.ui-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-text-balance { text-wrap: balance; }

/* Typography — Line clamp */
.ui-line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

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

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

/* ---------------------------------------------------------------------------
   Colors — Text (brand palette)
   --------------------------------------------------------------------------- */
.ui-text-dark-mint    { color: var(--color-dark-mint); }
.ui-text-dark-mint-06 { color: var(--color-dark-mint-60); }
.ui-text-mid-mint     { color: var(--color-mid-mint); }
.ui-text-accent-mint  { color: var(--color-accent-mint); }
.ui-text-mint         { color: var(--color-mint); }
.ui-text-white        { color: var(--color-white); }
.ui-text-white-06     { color: var(--color-white-06); }
.ui-text-green        { color: var(--pp-green); }
.ui-text-green-dark   { color: var(--pp-green-dark); }
.ui-text-muted        { color: var(--pp-text-muted); }
.ui-text-body         { color: var(--pp-text); }
.ui-text-gray         { color: #6b7280; }
.ui-text-dark         { color: #111827; }

/* ---------------------------------------------------------------------------
   Colors — Background (brand palette)
   --------------------------------------------------------------------------- */
.ui-bg-white       { background-color: var(--color-white); }
.ui-bg-mint        { background-color: var(--color-mint); }
.ui-bg-dark-mint   { background-color: var(--color-dark-mint); }
.ui-bg-mid-mint    { background-color: var(--color-mid-mint); }
.ui-bg-green       { background-color: var(--pp-green); }
.ui-bg-green-light { background-color: var(--pp-green-light); }
.ui-bg-light       { background-color: var(--pp-bg-light); }
.ui-bg-section     { background-color: var(--pp-bg-section-white); }
.ui-bg-gray        { background-color: #f3f4f6; }
.ui-bg-transparent { background-color: transparent; }

/* ---------------------------------------------------------------------------
   Borders
   --------------------------------------------------------------------------- */
.ui-border       { border: 1px solid var(--pp-border); }
.ui-border-2     { border: 2px solid var(--pp-border); }
.ui-border-t     { border-top: 1px solid var(--pp-border); }
.ui-border-b     { border-bottom: 1px solid var(--pp-border); }
.ui-border-l     { border-left: 1px solid var(--pp-border); }
.ui-border-r     { border-right: 1px solid var(--pp-border); }
.ui-border-none  { border: none; }
.ui-border-card  { border: var(--pp-border-card); }

.ui-border-mint  { border-color: var(--color-dark-mint); }
.ui-border-green { border-color: var(--pp-green); }

/* Border radius */
.ui-rounded-none { border-radius: 0; }
.ui-rounded-sm   { border-radius: var(--radius-sm); }   /* 4px */
.ui-rounded      { border-radius: var(--radius-base); } /* 8px */
.ui-rounded-lg   { border-radius: var(--radius-lg); }   /* 12px */
.ui-rounded-xl   { border-radius: var(--radius-xl); }   /* 16px */
.ui-rounded-2xl  { border-radius: 16px; }
.ui-rounded-full { border-radius: 9999px; }

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

/* ---------------------------------------------------------------------------
   Positioning
   --------------------------------------------------------------------------- */
.ui-static   { position: static; }
.ui-relative { position: relative; }
.ui-absolute { position: absolute; }
.ui-fixed    { position: fixed; }
.ui-sticky   { position: sticky; }

.ui-inset-0   { inset: 0; }
.ui-inset-y-0 { top: 0; bottom: 0; }
.ui-inset-x-0 { left: 0; right: 0; }

.ui-top-0    { top: 0; }
.ui-top-1    { top: calc(var(--space) * 1); }  /* 4px  */
.ui-top-2    { top: calc(var(--space) * 2); }  /* 8px  */
.ui-top-3    { top: calc(var(--space) * 3); }  /* 12px */
.ui-top-4    { top: calc(var(--space) * 4); }  /* 16px */

.ui-bottom-0 { bottom: 0; }
.ui-bottom-1 { bottom: calc(var(--space) * 1); } /* 4px  */
.ui-bottom-2 { bottom: calc(var(--space) * 2); } /* 8px  */
.ui-bottom-4 { bottom: calc(var(--space) * 4); } /* 16px */

.ui-left-0   { left: 0; }
.ui-left-1   { left: calc(var(--space) * 1); }  /* 4px  */
.ui-left-2   { left: calc(var(--space) * 2); }  /* 8px  */
.ui-left-4   { left: calc(var(--space) * 4); }  /* 16px */

.ui-right-0  { right: 0; }
.ui-right-1  { right: calc(var(--space) * 1); } /* 4px  */
.ui-right-2  { right: calc(var(--space) * 2); } /* 8px  */
.ui-right-4  { right: calc(var(--space) * 4); } /* 16px */

/* Z-index — mapped to project tokens */
.ui-z-0      { z-index: var(--z-base); }
.ui-z-10     { z-index: 10; }
.ui-z-20     { z-index: 20; }
.ui-z-30     { z-index: 30; }
.ui-z-drop   { z-index: var(--z-dropdown); }
.ui-z-sticky { z-index: var(--z-sticky); }
.ui-z-modal  { z-index: var(--z-modal); }
.ui-z-toast  { z-index: var(--z-toast); }

/* ---------------------------------------------------------------------------
   Overflow
   --------------------------------------------------------------------------- */
.ui-overflow-hidden  { overflow: hidden; }
.ui-overflow-auto    { overflow: auto; }
.ui-overflow-scroll  { overflow: scroll; }
.ui-overflow-x-auto  { overflow-x: auto; }
.ui-overflow-y-auto  { overflow-y: auto; }
.ui-overflow-x-hidden { overflow-x: hidden; }

/* ---------------------------------------------------------------------------
   Opacity
   --------------------------------------------------------------------------- */
.ui-opacity-0   { opacity: 0; }
.ui-opacity-50  { opacity: 0.5; }
.ui-opacity-60  { opacity: 0.6; }
.ui-opacity-75  { opacity: 0.75; }
.ui-opacity-100 { opacity: 1; }

/* ---------------------------------------------------------------------------
   Transitions
   --------------------------------------------------------------------------- */
.ui-transition        { transition: all 0.3s ease; }
.ui-transition-fast   { transition: all 0.15s ease; }
.ui-transition-colors { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }

/* ---------------------------------------------------------------------------
   Cursor / Pointer events
   --------------------------------------------------------------------------- */
.ui-cursor-pointer     { cursor: pointer; }
.ui-cursor-default     { cursor: default; }
.ui-cursor-not-allowed { cursor: not-allowed; }
.ui-pointer-none       { pointer-events: none; }

/* ---------------------------------------------------------------------------
   List
   --------------------------------------------------------------------------- */
.ui-list-none    { list-style: none; padding-left: 0; margin: 0; }
.ui-list-disc    { list-style: disc; }
.ui-list-decimal { list-style: decimal; }

/* ---------------------------------------------------------------------------
   Misc
   --------------------------------------------------------------------------- */
.ui-isolate        { isolation: isolate; }
.ui-object-cover   { object-fit: cover; }
.ui-object-contain { object-fit: contain; }
.ui-select-none    { user-select: none; -webkit-user-select: none; }
.ui-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   Responsive — SM  ≥640px
   --------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .sm\:ui-flex         { display: flex !important; }
  .sm\:ui-block        { display: block !important; }
  .sm\:ui-hidden       { display: none !important; }

  .sm\:ui-flex-row     { flex-direction: row; }
  .sm\:ui-flex-col     { flex-direction: column; }
  .sm\:ui-flex-wrap    { flex-wrap: wrap; }
  .sm\:ui-flex-nowrap  { flex-wrap: nowrap; }

  .sm\:ui-justify-start   { justify-content: flex-start; }
  .sm\:ui-justify-between { justify-content: space-between; }
  .sm\:ui-justify-center  { justify-content: center; }
  .sm\:ui-justify-end     { justify-content: flex-end; }
  .sm\:ui-items-center    { align-items: center; }
  .sm\:ui-items-start     { align-items: flex-start; }

  .sm\:ui-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .sm\:ui-w-full { width: 100%; }
  .sm\:ui-w-50   { width: 50%; }
  .sm\:ui-w-33   { width: 33.333%; }
  .sm\:ui-w-fit  { width: fit-content; }

  .sm\:ui-gap-2  { gap: calc(var(--space) * 2); }
  .sm\:ui-gap-4  { gap: calc(var(--space) * 4); }
  .sm\:ui-gap-6  { gap: calc(var(--space) * 6); }

  .sm\:ui-p-4    { padding: calc(var(--space) * 4); }
  .sm\:ui-p-6    { padding: calc(var(--space) * 6); }
  .sm\:ui-px-6   { padding-left: calc(var(--space) * 6); padding-right: calc(var(--space) * 6); }

  .sm\:ui-text-sm   { font-size: var(--text-sm); }
  .sm\:ui-text-base { font-size: var(--text-base); }
  .sm\:ui-text-lg   { font-size: var(--text-lg); }
  .sm\:ui-text-xl   { font-size: var(--text-xl); }
  .sm\:ui-text-left   { text-align: left; }
  .sm\:ui-text-center { text-align: center; }
}

/* ---------------------------------------------------------------------------
   Responsive — MD  ≥768px
   --------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .md\:ui-flex   { display: flex !important; }
  .md\:ui-grid   { display: grid !important; }
  .md\:ui-block  { display: block !important; }
  .md\:ui-hidden { display: none !important; }

  .md\:ui-flex-row     { flex-direction: row; }
  .md\:ui-flex-col     { flex-direction: column; }
  .md\:ui-flex-wrap    { flex-wrap: wrap; }
  .md\:ui-flex-nowrap  { flex-wrap: nowrap; }

  .md\:ui-justify-start   { justify-content: flex-start; }
  .md\:ui-justify-between { justify-content: space-between; }
  .md\:ui-justify-center  { justify-content: center; }
  .md\:ui-justify-end     { justify-content: flex-end; }
  .md\:ui-items-center    { align-items: center; }
  .md\:ui-items-start     { align-items: flex-start; }

  .md\:ui-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:ui-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:ui-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .md\:ui-col-span-1 { grid-column: span 1; }
  .md\:ui-col-span-2 { grid-column: span 2; }
  .md\:ui-col-span-full { grid-column: 1 / -1; }

  .md\:ui-w-full  { width: 100%; }
  .md\:ui-w-fit   { width: fit-content; }
  .md\:ui-w-50    { width: 50%; }
  .md\:ui-w-33    { width: 33.333%; }
  .md\:ui-w-66    { width: 66.666%; }

  .md\:ui-gap-2   { gap: calc(var(--space) * 2); }
  .md\:ui-gap-3   { gap: calc(var(--space) * 3); }
  .md\:ui-gap-4   { gap: calc(var(--space) * 4); }
  .md\:ui-gap-6   { gap: calc(var(--space) * 6); }
  .md\:ui-gap-8   { gap: calc(var(--space) * 8); }

  .md\:ui-p-6     { padding: calc(var(--space) * 6); }
  .md\:ui-p-8     { padding: calc(var(--space) * 8); }
  .md\:ui-px-8    { padding-left: calc(var(--space) * 8); padding-right: calc(var(--space) * 8); }
  .md\:ui-py-12   { padding-top: calc(var(--space) * 12); padding-bottom: calc(var(--space) * 12); }
  .md\:ui-pt-0    { padding-top: 0; }
  .md\:ui-pt-4    { padding-top: calc(var(--space) * 4); }
  .md\:ui-pr-8    { padding-right: calc(var(--space) * 8); }
  .md\:ui-pb-0    { padding-bottom: 0; }

  .md\:ui-mt-0    { margin-top: 0; }
  .md\:ui-mx-auto { margin-left: auto; margin-right: auto; }

  .md\:ui-text-lg   { font-size: var(--text-lg); }
  .md\:ui-text-xl   { font-size: var(--text-xl); }
  .md\:ui-text-2xl  { font-size: var(--text-2xl); }
  .md\:ui-text-3xl  { font-size: var(--text-3xl); }
  .md\:ui-text-left   { text-align: left; }
  .md\:ui-text-center { text-align: center; }

  .md\:ui-whitespace-nowrap   { white-space: nowrap; }
  .md\:ui-whitespace-pre-wrap { white-space: pre-wrap; }
}

/* ---------------------------------------------------------------------------
   Responsive — LG  ≥1024px
   --------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .lg\:ui-flex   { display: flex !important; }
  .lg\:ui-block  { display: block !important; }
  .lg\:ui-hidden { display: none !important; }

  .lg\:ui-flex-row  { flex-direction: row; }
  .lg\:ui-flex-col  { flex-direction: column; }
  .lg\:ui-flex-wrap { flex-wrap: wrap; }

  .lg\:ui-justify-between { justify-content: space-between; }
  .lg\:ui-justify-end     { justify-content: flex-end; }
  .lg\:ui-items-center    { align-items: center; }

  .lg\:ui-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:ui-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:ui-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .lg\:ui-w-full  { width: 100%; }
  .lg\:ui-w-fit   { width: fit-content; }
  .lg\:ui-w-50    { width: 50%; }
  .lg\:ui-w-33    { width: 33.333%; }
  .lg\:ui-w-66    { width: 66.666%; }

  .lg\:ui-gap-4   { gap: calc(var(--space) * 4); }
  .lg\:ui-gap-6   { gap: calc(var(--space) * 6); }
  .lg\:ui-gap-8   { gap: calc(var(--space) * 8); }

  .lg\:ui-p-8     { padding: calc(var(--space) * 8); }
  .lg\:ui-px-12   { padding-left: calc(var(--space) * 12); padding-right: calc(var(--space) * 12); }
  .lg\:ui-py-15   { padding-top: calc(var(--space) * 15); padding-bottom: calc(var(--space) * 15); }
  .lg\:ui-pt-0    { padding-top: 0; }

  .lg\:ui-text-xl   { font-size: var(--text-xl); }
  .lg\:ui-text-2xl  { font-size: var(--text-2xl); }
  .lg\:ui-text-3xl  { font-size: var(--text-3xl); }
  .lg\:ui-text-4xl  { font-size: var(--text-4xl); }
}

/* ---------------------------------------------------------------------------
   Responsive — XL  ≥1280px
   --------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  .xl\:ui-flex   { display: flex !important; }
  .xl\:ui-block  { display: block !important; }
  .xl\:ui-hidden { display: none !important; }

  .xl\:ui-flex-row { flex-direction: row; }

  .xl\:ui-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .xl\:ui-w-full  { width: 100%; }
  .xl\:ui-w-50    { width: 50%; }
  .xl\:ui-w-33    { width: 33.333%; }

  .xl\:ui-gap-8   { gap: calc(var(--space) * 8); }

  .xl\:ui-text-xl  { font-size: var(--text-xl); }
  .xl\:ui-text-2xl { font-size: var(--text-2xl); }
}