/* ============================================================
   unc.css — utility CSS library
   No build step required.
   Customize via CSS variables in unc-extend.css
   ============================================================ */


/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {

  /* Colors */
  --color-primary:        #3b82f6;
  --color-primary-hover:  #2563eb;
  --color-primary-focus:  #1d4ed8;
  --color-primary-active: #1e40af;

  --color-secondary:        #8b5cf6;
  --color-secondary-hover:  #7c3aed;
  --color-secondary-focus:  #6d28d9;
  --color-secondary-active: #5b21b6;

  --color-muted:        #6b7280;
  --color-muted-hover:  #4b5563;
  --color-muted-focus:  #374151;
  --color-muted-active: #1f2937;

  --color-surface:        #f9fafb;
  --color-surface-hover:  #f3f4f6;
  --color-surface-focus:  #e5e7eb;
  --color-surface-active: #d1d5db;

  --color-background:        #ffffff;
  --color-background-hover:  #f9fafb;
  --color-background-focus:  #f3f4f6;
  --color-background-active: #e5e7eb;

  --color-text:        #111827;
  --color-text-hover:  #030712;
  --color-text-focus:  #030712;
  --color-text-active: #000000;

  --color-border:        #e5e7eb;
  --color-border-hover:  #d1d5db;
  --color-border-focus:  #9ca3af;
  --color-border-active: #6b7280;

  --color-success:        #22c55e;
  --color-success-hover:  #16a34a;
  --color-success-focus:  #15803d;
  --color-success-active: #166534;

  --color-danger:        #ef4444;
  --color-danger-hover:  #dc2626;
  --color-danger-focus:  #b91c1c;
  --color-danger-active: #991b1b;

  --color-warning:        #eab308;
  --color-warning-hover:  #ca8a04;
  --color-warning-focus:  #a16207;
  --color-warning-active: #854d0e;

  --color-white: #ffffff;
  --color-black: #000000;

  /* Spacing */
  --space-0:  0;
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-7:  1.75rem;   /* 28px */
  --space-8:  2rem;      /* 32px */
  --space-9:  2.25rem;   /* 36px */
  --space-10: 2.5rem;    /* 40px */

  /* Border Radius */
  --radius-sm:   0.125rem;
  --radius-md:   0.375rem;
  --radius-lg:   0.5rem;
  --radius-full: 9999px;

  /* Font Sizes */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;

  /* Font Weights */
  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-black:    900;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

}


/* ============================================================
   RESET / BASE
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-background);
}

img, video, svg {
  display: block;
  max-width: 100%;
}


/* ============================================================
   DISPLAY
   ============================================================ */

.block        { display: block; }
.inline-block { display: inline-block; }
.inline       { display: inline; }
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.grid         { display: grid; }
.inline-grid  { display: inline-grid; }
.hidden       { display: none; }


/* ============================================================
   POSITION
   ============================================================ */

.static   { position: static; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }

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


/* ============================================================
   OVERFLOW
   ============================================================ */

.overflow-auto     { overflow: auto; }
.overflow-hidden   { overflow: hidden; }
.overflow-visible  { overflow: visible; }
.overflow-scroll   { overflow: scroll; }
.overflow-x-auto   { overflow-x: auto; }
.overflow-y-auto   { overflow-y: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-hidden { overflow-y: hidden; }


/* ============================================================
   FLEX
   ============================================================ */

.flex-row         { flex-direction: row; }
.flex-col         { flex-direction: column; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col-reverse { flex-direction: column-reverse; }

.flex-wrap   { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.flex-1      { flex: 1 1 0%; }
.flex-auto   { flex: 1 1 auto; }
.flex-none   { flex: none; }
.flex-grow   { flex-grow: 1; }
.flex-shrink { flex-shrink: 1; }
.flex-grow-0   { flex-grow: 0; }
.flex-shrink-0 { flex-shrink: 0; }

.justify-start   { justify-content: flex-start; }
.justify-end     { justify-content: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.justify-evenly  { justify-content: space-evenly; }

.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.items-center   { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch  { align-items: stretch; }

.self-start   { align-self: flex-start; }
.self-end     { align-self: flex-end; }
.self-center  { align-self: center; }
.self-stretch { align-self: stretch; }
.self-auto    { align-self: auto; }


/* ============================================================
   GRID
   ============================================================ */

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

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


/* ============================================================
   GAP
   ============================================================ */

.gap-0  { gap: var(--space-0); }
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-5  { gap: var(--space-5); }
.gap-6  { gap: var(--space-6); }
.gap-7  { gap: var(--space-7); }
.gap-8  { gap: var(--space-8); }
.gap-9  { gap: var(--space-9); }
.gap-10 { gap: var(--space-10); }

.gap-x-0  { column-gap: var(--space-0); }
.gap-x-1  { column-gap: var(--space-1); }
.gap-x-2  { column-gap: var(--space-2); }
.gap-x-3  { column-gap: var(--space-3); }
.gap-x-4  { column-gap: var(--space-4); }
.gap-x-6  { column-gap: var(--space-6); }
.gap-x-8  { column-gap: var(--space-8); }
.gap-x-10 { column-gap: var(--space-10); }

.gap-y-0  { row-gap: var(--space-0); }
.gap-y-1  { row-gap: var(--space-1); }
.gap-y-2  { row-gap: var(--space-2); }
.gap-y-3  { row-gap: var(--space-3); }
.gap-y-4  { row-gap: var(--space-4); }
.gap-y-6  { row-gap: var(--space-6); }
.gap-y-8  { row-gap: var(--space-8); }
.gap-y-10 { row-gap: var(--space-10); }


/* ============================================================
   MARGIN
   ============================================================ */

.m-0    { margin: var(--space-0); }
.m-1    { margin: var(--space-1); }
.m-2    { margin: var(--space-2); }
.m-3    { margin: var(--space-3); }
.m-4    { margin: var(--space-4); }
.m-5    { margin: var(--space-5); }
.m-6    { margin: var(--space-6); }
.m-7    { margin: var(--space-7); }
.m-8    { margin: var(--space-8); }
.m-9    { margin: var(--space-9); }
.m-10   { margin: var(--space-10); }
.m-auto { margin: auto; }

.mx-0    { margin-left: var(--space-0);  margin-right: var(--space-0); }
.mx-1    { margin-left: var(--space-1);  margin-right: var(--space-1); }
.mx-2    { margin-left: var(--space-2);  margin-right: var(--space-2); }
.mx-3    { margin-left: var(--space-3);  margin-right: var(--space-3); }
.mx-4    { margin-left: var(--space-4);  margin-right: var(--space-4); }
.mx-5    { margin-left: var(--space-5);  margin-right: var(--space-5); }
.mx-6    { margin-left: var(--space-6);  margin-right: var(--space-6); }
.mx-7    { margin-left: var(--space-7);  margin-right: var(--space-7); }
.mx-8    { margin-left: var(--space-8);  margin-right: var(--space-8); }
.mx-9    { margin-left: var(--space-9);  margin-right: var(--space-9); }
.mx-10   { margin-left: var(--space-10); margin-right: var(--space-10); }
.mx-auto { margin-left: auto;            margin-right: auto; }

.my-0  { margin-top: var(--space-0);  margin-bottom: var(--space-0); }
.my-1  { margin-top: var(--space-1);  margin-bottom: var(--space-1); }
.my-2  { margin-top: var(--space-2);  margin-bottom: var(--space-2); }
.my-3  { margin-top: var(--space-3);  margin-bottom: var(--space-3); }
.my-4  { margin-top: var(--space-4);  margin-bottom: var(--space-4); }
.my-5  { margin-top: var(--space-5);  margin-bottom: var(--space-5); }
.my-6  { margin-top: var(--space-6);  margin-bottom: var(--space-6); }
.my-7  { margin-top: var(--space-7);  margin-bottom: var(--space-7); }
.my-8  { margin-top: var(--space-8);  margin-bottom: var(--space-8); }
.my-9  { margin-top: var(--space-9);  margin-bottom: var(--space-9); }
.my-10 { margin-top: var(--space-10); margin-bottom: var(--space-10); }

.mt-0    { margin-top: var(--space-0); }
.mt-1    { margin-top: var(--space-1); }
.mt-2    { margin-top: var(--space-2); }
.mt-3    { margin-top: var(--space-3); }
.mt-4    { margin-top: var(--space-4); }
.mt-5    { margin-top: var(--space-5); }
.mt-6    { margin-top: var(--space-6); }
.mt-7    { margin-top: var(--space-7); }
.mt-8    { margin-top: var(--space-8); }
.mt-9    { margin-top: var(--space-9); }
.mt-10   { margin-top: var(--space-10); }
.mt-auto { margin-top: auto; }

.mr-0    { margin-right: var(--space-0); }
.mr-1    { margin-right: var(--space-1); }
.mr-2    { margin-right: var(--space-2); }
.mr-3    { margin-right: var(--space-3); }
.mr-4    { margin-right: var(--space-4); }
.mr-5    { margin-right: var(--space-5); }
.mr-6    { margin-right: var(--space-6); }
.mr-7    { margin-right: var(--space-7); }
.mr-8    { margin-right: var(--space-8); }
.mr-9    { margin-right: var(--space-9); }
.mr-10   { margin-right: var(--space-10); }
.mr-auto { margin-right: auto; }

.mb-0    { margin-bottom: var(--space-0); }
.mb-1    { margin-bottom: var(--space-1); }
.mb-2    { margin-bottom: var(--space-2); }
.mb-3    { margin-bottom: var(--space-3); }
.mb-4    { margin-bottom: var(--space-4); }
.mb-5    { margin-bottom: var(--space-5); }
.mb-6    { margin-bottom: var(--space-6); }
.mb-7    { margin-bottom: var(--space-7); }
.mb-8    { margin-bottom: var(--space-8); }
.mb-9    { margin-bottom: var(--space-9); }
.mb-10   { margin-bottom: var(--space-10); }
.mb-auto { margin-bottom: auto; }

.ml-0    { margin-left: var(--space-0); }
.ml-1    { margin-left: var(--space-1); }
.ml-2    { margin-left: var(--space-2); }
.ml-3    { margin-left: var(--space-3); }
.ml-4    { margin-left: var(--space-4); }
.ml-5    { margin-left: var(--space-5); }
.ml-6    { margin-left: var(--space-6); }
.ml-7    { margin-left: var(--space-7); }
.ml-8    { margin-left: var(--space-8); }
.ml-9    { margin-left: var(--space-9); }
.ml-10   { margin-left: var(--space-10); }
.ml-auto { margin-left: auto; }


/* ============================================================
   PADDING
   ============================================================ */

.p-0  { padding: var(--space-0); }
.p-1  { padding: var(--space-1); }
.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.p-5  { padding: var(--space-5); }
.p-6  { padding: var(--space-6); }
.p-7  { padding: var(--space-7); }
.p-8  { padding: var(--space-8); }
.p-9  { padding: var(--space-9); }
.p-10 { padding: var(--space-10); }

.px-0  { padding-left: var(--space-0);  padding-right: var(--space-0); }
.px-1  { padding-left: var(--space-1);  padding-right: var(--space-1); }
.px-2  { padding-left: var(--space-2);  padding-right: var(--space-2); }
.px-3  { padding-left: var(--space-3);  padding-right: var(--space-3); }
.px-4  { padding-left: var(--space-4);  padding-right: var(--space-4); }
.px-5  { padding-left: var(--space-5);  padding-right: var(--space-5); }
.px-6  { padding-left: var(--space-6);  padding-right: var(--space-6); }
.px-7  { padding-left: var(--space-7);  padding-right: var(--space-7); }
.px-8  { padding-left: var(--space-8);  padding-right: var(--space-8); }
.px-9  { padding-left: var(--space-9);  padding-right: var(--space-9); }
.px-10 { padding-left: var(--space-10); padding-right: var(--space-10); }

.py-0  { padding-top: var(--space-0);  padding-bottom: var(--space-0); }
.py-1  { padding-top: var(--space-1);  padding-bottom: var(--space-1); }
.py-2  { padding-top: var(--space-2);  padding-bottom: var(--space-2); }
.py-3  { padding-top: var(--space-3);  padding-bottom: var(--space-3); }
.py-4  { padding-top: var(--space-4);  padding-bottom: var(--space-4); }
.py-5  { padding-top: var(--space-5);  padding-bottom: var(--space-5); }
.py-6  { padding-top: var(--space-6);  padding-bottom: var(--space-6); }
.py-7  { padding-top: var(--space-7);  padding-bottom: var(--space-7); }
.py-8  { padding-top: var(--space-8);  padding-bottom: var(--space-8); }
.py-9  { padding-top: var(--space-9);  padding-bottom: var(--space-9); }
.py-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); }

.pt-0  { padding-top: var(--space-0); }
.pt-1  { padding-top: var(--space-1); }
.pt-2  { padding-top: var(--space-2); }
.pt-3  { padding-top: var(--space-3); }
.pt-4  { padding-top: var(--space-4); }
.pt-5  { padding-top: var(--space-5); }
.pt-6  { padding-top: var(--space-6); }
.pt-7  { padding-top: var(--space-7); }
.pt-8  { padding-top: var(--space-8); }
.pt-9  { padding-top: var(--space-9); }
.pt-10 { padding-top: var(--space-10); }

.pr-0  { padding-right: var(--space-0); }
.pr-1  { padding-right: var(--space-1); }
.pr-2  { padding-right: var(--space-2); }
.pr-3  { padding-right: var(--space-3); }
.pr-4  { padding-right: var(--space-4); }
.pr-5  { padding-right: var(--space-5); }
.pr-6  { padding-right: var(--space-6); }
.pr-7  { padding-right: var(--space-7); }
.pr-8  { padding-right: var(--space-8); }
.pr-9  { padding-right: var(--space-9); }
.pr-10 { padding-right: var(--space-10); }

.pb-0  { padding-bottom: var(--space-0); }
.pb-1  { padding-bottom: var(--space-1); }
.pb-2  { padding-bottom: var(--space-2); }
.pb-3  { padding-bottom: var(--space-3); }
.pb-4  { padding-bottom: var(--space-4); }
.pb-5  { padding-bottom: var(--space-5); }
.pb-6  { padding-bottom: var(--space-6); }
.pb-7  { padding-bottom: var(--space-7); }
.pb-8  { padding-bottom: var(--space-8); }
.pb-9  { padding-bottom: var(--space-9); }
.pb-10 { padding-bottom: var(--space-10); }

.pl-0  { padding-left: var(--space-0); }
.pl-1  { padding-left: var(--space-1); }
.pl-2  { padding-left: var(--space-2); }
.pl-3  { padding-left: var(--space-3); }
.pl-4  { padding-left: var(--space-4); }
.pl-5  { padding-left: var(--space-5); }
.pl-6  { padding-left: var(--space-6); }
.pl-7  { padding-left: var(--space-7); }
.pl-8  { padding-left: var(--space-8); }
.pl-9  { padding-left: var(--space-9); }
.pl-10 { padding-left: var(--space-10); }


/* ============================================================
   WIDTH & HEIGHT
   ============================================================ */

.w-auto   { width: auto; }
.w-full   { width: 100%; }
.w-screen { width: 100vw; }
.w-fit    { width: fit-content; }
.w-min    { width: min-content; }
.w-max    { width: max-content; }

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

.min-w-0      { min-width: 0; }
.min-h-screen { min-height: 100vh; }

.max-w-xs   { max-width: 20rem; }
.max-w-sm   { max-width: 24rem; }
.max-w-md   { max-width: 28rem; }
.max-w-lg   { max-width: 32rem; }
.max-w-xl   { max-width: 36rem; }
.max-w-2xl  { max-width: 42rem; }
.max-w-3xl  { max-width: 48rem; }
.max-w-4xl  { max-width: 56rem; }
.max-w-5xl  { max-width: 64rem; }
.max-w-6xl  { max-width: 72rem; }
.max-w-7xl  { max-width: 80rem; }
.max-w-full { max-width: 100%; }

.container {
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}


/* ============================================================
   TYPOGRAPHY
   ============================================================ */

.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { 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); }
.text-3xl  { font-size: var(--text-3xl); }
.text-4xl  { font-size: var(--text-4xl); }
.text-5xl  { font-size: var(--text-5xl); }
.text-6xl  { font-size: var(--text-6xl); }
.text-7xl  { font-size: var(--text-7xl); }

.font-normal   { font-weight: var(--font-normal); }
.font-medium   { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold     { font-weight: var(--font-bold); }
.font-black    { font-weight: var(--font-black); }

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

.italic     { font-style: italic; }
.not-italic { font-style: normal; }

.uppercase   { text-transform: uppercase; }
.lowercase   { text-transform: lowercase; }
.capitalize  { text-transform: capitalize; }
.normal-case { text-transform: none; }

.underline    { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.no-underline { text-decoration: none; }

.leading-none    { line-height: 1; }
.leading-tight   { line-height: 1.25; }
.leading-normal  { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-loose   { line-height: 2; }

.tracking-tight  { letter-spacing: -0.025em; }
.tracking-normal { letter-spacing: 0em; }
.tracking-wide   { letter-spacing: 0.025em; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-normal  { white-space: normal; }
.whitespace-nowrap  { white-space: nowrap; }
.whitespace-pre     { white-space: pre; }
.whitespace-pre-wrap { white-space: pre-wrap; }

.break-words { overflow-wrap: break-word; }
.break-all   { word-break: break-all; }


/* ============================================================
   TEXT COLORS
   ============================================================ */

.text-primary   { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-muted     { color: var(--color-muted); }
.text-success   { color: var(--color-success); }
.text-danger    { color: var(--color-danger); }
.text-warning   { color: var(--color-warning); }
.text-default   { color: var(--color-text); }
.text-white     { color: var(--color-white); }
.text-black     { color: var(--color-black); }
.text-inherit   { color: inherit; }


/* ============================================================
   BACKGROUND COLORS
   ============================================================ */

.bg-primary    { background-color: var(--color-primary); }
.bg-secondary  { background-color: var(--color-secondary); }
.bg-muted      { background-color: var(--color-muted); }
.bg-surface    { background-color: var(--color-surface); }
.bg-background { background-color: var(--color-background); }
.bg-success    { background-color: var(--color-success); }
.bg-danger     { background-color: var(--color-danger); }
.bg-warning    { background-color: var(--color-warning); }
.bg-white      { background-color: var(--color-white); }
.bg-black      { background-color: var(--color-black); }
.bg-transparent { background-color: transparent; }


/* ============================================================
   BORDER COLORS
   ============================================================ */

.border-primary   { border-color: var(--color-primary); }
.border-secondary { border-color: var(--color-secondary); }
.border-muted     { border-color: var(--color-muted); }
.border-success   { border-color: var(--color-success); }
.border-danger    { border-color: var(--color-danger); }
.border-warning   { border-color: var(--color-warning); }
.border-white     { border-color: var(--color-white); }
.border-black     { border-color: var(--color-black); }


/* ============================================================
   BORDERS
   ============================================================ */

.border   { border: 1px solid var(--color-border); }
.border-0 { border: none; }
.border-t { border-top: 1px solid var(--color-border); }
.border-r { border-right: 1px solid var(--color-border); }
.border-b { border-bottom: 1px solid var(--color-border); }
.border-l { border-left: 1px solid var(--color-border); }
.border-2 { border-width: 2px; }
.border-4 { border-width: 4px; }

.border-solid  { border-style: solid; }
.border-dashed { border-style: dashed; }
.border-dotted { border-style: dotted; }


/* ============================================================
   BORDER RADIUS
   ============================================================ */

.rounded-none { border-radius: 0; }
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded      { border-radius: var(--radius-md); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

.rounded-t-none { border-top-left-radius: 0;                border-top-right-radius: 0; }
.rounded-t-sm   { border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); }
.rounded-t-md   { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
.rounded-t-lg   { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); }

.rounded-b-none { border-bottom-left-radius: 0;                border-bottom-right-radius: 0; }
.rounded-b-sm   { border-bottom-left-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
.rounded-b-md   { border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
.rounded-b-lg   { border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }


/* ============================================================
   SHADOWS
   ============================================================ */

.shadow-none { box-shadow: none; }
.shadow-sm   { box-shadow: var(--shadow-sm); }
.shadow      { box-shadow: var(--shadow-md); }
.shadow-md   { box-shadow: var(--shadow-md); }
.shadow-lg   { box-shadow: var(--shadow-lg); }
.shadow-xl   { box-shadow: var(--shadow-xl); }


/* ============================================================
   CURSOR
   ============================================================ */

.cursor-auto        { cursor: auto; }
.cursor-default     { cursor: default; }
.cursor-pointer     { cursor: pointer; }
.cursor-wait        { cursor: wait; }
.cursor-text        { cursor: text; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-grab        { cursor: grab; }


/* ============================================================
   TRANSITIONS
   ============================================================ */

.transition           { transition: all var(--transition-base); }
.transition-fast      { transition: all var(--transition-fast); }
.transition-slow      { transition: all var(--transition-slow); }
.transition-none      { transition: none; }
.transition-colors    { transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base); }
.transition-opacity   { transition: opacity var(--transition-base); }
.transition-transform { transition: transform var(--transition-base); }


/* ============================================================
   OPACITY
   ============================================================ */

.opacity-0   { opacity: 0; }
.opacity-25  { opacity: 0.25; }
.opacity-50  { opacity: 0.5; }
.opacity-75  { opacity: 0.75; }
.opacity-100 { opacity: 1; }


/* ============================================================
   VISIBILITY
   ============================================================ */

.visible   { visibility: visible; }
.invisible { visibility: hidden; }


/* ============================================================
   Z-INDEX
   ============================================================ */

.z-0    { z-index: 0; }
.z-10   { z-index: 10; }
.z-20   { z-index: 20; }
.z-30   { z-index: 30; }
.z-40   { z-index: 40; }
.z-50   { z-index: 50; }
.z-auto { z-index: auto; }


/* ============================================================
   MISC
   ============================================================ */

.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;
}

.outline-none { outline: none; }
.ring         { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all  { user-select: all; }

.list-none { list-style: none; }

.appearance-none { appearance: none; }

.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video  { aspect-ratio: 16 / 9; }

.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-center  { object-position: center; }


/* ============================================================
   HOVER VARIANTS  (.property-value-hover)
   ============================================================ */

/* Background */
.bg-primary-hover:hover     { background-color: var(--color-primary-hover); }
.bg-secondary-hover:hover   { background-color: var(--color-secondary-hover); }
.bg-muted-hover:hover       { background-color: var(--color-muted-hover); }
.bg-surface-hover:hover     { background-color: var(--color-surface-hover); }
.bg-success-hover:hover     { background-color: var(--color-success-hover); }
.bg-danger-hover:hover      { background-color: var(--color-danger-hover); }
.bg-warning-hover:hover     { background-color: var(--color-warning-hover); }
.bg-white-hover:hover       { background-color: var(--color-white); }
.bg-transparent-hover:hover { background-color: transparent; }

/* Text */
.text-primary-hover:hover   { color: var(--color-primary-hover); }
.text-secondary-hover:hover { color: var(--color-secondary-hover); }
.text-muted-hover:hover     { color: var(--color-muted-hover); }
.text-success-hover:hover   { color: var(--color-success-hover); }
.text-danger-hover:hover    { color: var(--color-danger-hover); }
.text-warning-hover:hover   { color: var(--color-warning-hover); }
.text-white-hover:hover     { color: var(--color-white); }
.text-black-hover:hover     { color: var(--color-black); }

/* Border */
.border-primary-hover:hover   { border-color: var(--color-primary-hover); }
.border-secondary-hover:hover { border-color: var(--color-secondary-hover); }
.border-muted-hover:hover     { border-color: var(--color-muted-hover); }
.border-success-hover:hover   { border-color: var(--color-success-hover); }
.border-danger-hover:hover    { border-color: var(--color-danger-hover); }
.border-warning-hover:hover   { border-color: var(--color-warning-hover); }

/* Shadow */
.shadow-sm-hover:hover   { box-shadow: var(--shadow-sm); }
.shadow-md-hover:hover   { box-shadow: var(--shadow-md); }
.shadow-lg-hover:hover   { box-shadow: var(--shadow-lg); }
.shadow-xl-hover:hover   { box-shadow: var(--shadow-xl); }
.shadow-none-hover:hover { box-shadow: none; }

/* Opacity */
.opacity-0-hover:hover   { opacity: 0; }
.opacity-25-hover:hover  { opacity: 0.25; }
.opacity-50-hover:hover  { opacity: 0.5; }
.opacity-75-hover:hover  { opacity: 0.75; }
.opacity-100-hover:hover { opacity: 1; }


/* ============================================================
   FOCUS VARIANTS  (.property-value-focus)
   ============================================================ */

/* Background */
.bg-primary-focus:focus   { background-color: var(--color-primary-focus); }
.bg-secondary-focus:focus { background-color: var(--color-secondary-focus); }
.bg-muted-focus:focus     { background-color: var(--color-muted-focus); }
.bg-surface-focus:focus   { background-color: var(--color-surface-focus); }
.bg-success-focus:focus   { background-color: var(--color-success-focus); }
.bg-danger-focus:focus    { background-color: var(--color-danger-focus); }
.bg-warning-focus:focus   { background-color: var(--color-warning-focus); }

/* Text */
.text-primary-focus:focus   { color: var(--color-primary-focus); }
.text-secondary-focus:focus { color: var(--color-secondary-focus); }
.text-muted-focus:focus     { color: var(--color-muted-focus); }
.text-success-focus:focus   { color: var(--color-success-focus); }
.text-danger-focus:focus    { color: var(--color-danger-focus); }
.text-warning-focus:focus   { color: var(--color-warning-focus); }

/* Border */
.border-primary-focus:focus   { border-color: var(--color-primary-focus); }
.border-secondary-focus:focus { border-color: var(--color-secondary-focus); }
.border-muted-focus:focus     { border-color: var(--color-muted-focus); }
.border-success-focus:focus   { border-color: var(--color-success-focus); }
.border-danger-focus:focus    { border-color: var(--color-danger-focus); }
.border-warning-focus:focus   { border-color: var(--color-warning-focus); }

/* Outline */
.outline-none-focus:focus { outline: none; }
.ring-focus:focus         { outline: 2px solid var(--color-primary-focus); outline-offset: 2px; }
.ring-danger-focus:focus  { outline: 2px solid var(--color-danger-focus);  outline-offset: 2px; }


/* ============================================================
   ACTIVE VARIANTS  (.property-value-active)
   ============================================================ */

/* Background */
.bg-primary-active:active   { background-color: var(--color-primary-active); }
.bg-secondary-active:active { background-color: var(--color-secondary-active); }
.bg-muted-active:active     { background-color: var(--color-muted-active); }
.bg-surface-active:active   { background-color: var(--color-surface-active); }
.bg-success-active:active   { background-color: var(--color-success-active); }
.bg-danger-active:active    { background-color: var(--color-danger-active); }
.bg-warning-active:active   { background-color: var(--color-warning-active); }

/* Text */
.text-primary-active:active   { color: var(--color-primary-active); }
.text-secondary-active:active { color: var(--color-secondary-active); }
.text-muted-active:active     { color: var(--color-muted-active); }
.text-success-active:active   { color: var(--color-success-active); }
.text-danger-active:active    { color: var(--color-danger-active); }
.text-warning-active:active   { color: var(--color-warning-active); }

/* Border */
.border-primary-active:active   { border-color: var(--color-primary-active); }
.border-secondary-active:active { border-color: var(--color-secondary-active); }
.border-muted-active:active     { border-color: var(--color-muted-active); }
.border-success-active:active   { border-color: var(--color-success-active); }
.border-danger-active:active    { border-color: var(--color-danger-active); }
.border-warning-active:active   { border-color: var(--color-warning-active); }

/* Opacity */
.opacity-0-active:active   { opacity: 0; }
.opacity-25-active:active  { opacity: 0.25; }
.opacity-50-active:active  { opacity: 0.5; }
.opacity-75-active:active  { opacity: 0.75; }
.opacity-100-active:active { opacity: 1; }


/* ============================================================
   RESPONSIVE VARIANTS — sm (min-width: 640px)
   Suffix convention: .utility-sm
   ============================================================ */

@media (min-width: 640px) {

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

  /* Flex */
  .flex-row-sm { flex-direction: row; }
  .flex-col-sm { flex-direction: column; }

  /* Justify */
  .justify-start-sm   { justify-content: flex-start; }
  .justify-end-sm     { justify-content: flex-end; }
  .justify-center-sm  { justify-content: center; }
  .justify-between-sm { justify-content: space-between; }

  /* Align */
  .items-start-sm   { align-items: flex-start; }
  .items-end-sm     { align-items: flex-end; }
  .items-center-sm  { align-items: center; }
  .items-stretch-sm { align-items: stretch; }

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

  /* Typography */
  .text-xs-sm   { font-size: var(--text-xs); }
  .text-sm-sm   { font-size: var(--text-sm); }
  .text-base-sm { font-size: var(--text-base); }
  .text-lg-sm   { font-size: var(--text-lg); }
  .text-xl-sm   { font-size: var(--text-xl); }
  .text-2xl-sm  { font-size: var(--text-2xl); }
  .text-3xl-sm  { font-size: var(--text-3xl); }
  .text-4xl-sm  { font-size: var(--text-4xl); }
  .text-5xl-sm  { font-size: var(--text-5xl); }
  .text-6xl-sm  { font-size: var(--text-6xl); }
  .text-7xl-sm  { font-size: var(--text-7xl); }

  /* Width */
  .w-full-sm { width: 100%; }
  .w-auto-sm { width: auto; }

}


/* ============================================================
   RESPONSIVE VARIANTS — md (min-width: 768px)
   Suffix convention: .utility-md
   ============================================================ */

@media (min-width: 768px) {

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

  /* Flex */
  .flex-row-md { flex-direction: row; }
  .flex-col-md { flex-direction: column; }

  /* Justify */
  .justify-start-md   { justify-content: flex-start; }
  .justify-end-md     { justify-content: flex-end; }
  .justify-center-md  { justify-content: center; }
  .justify-between-md { justify-content: space-between; }

  /* Align */
  .items-start-md   { align-items: flex-start; }
  .items-end-md     { align-items: flex-end; }
  .items-center-md  { align-items: center; }
  .items-stretch-md { align-items: stretch; }

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

  /* Typography */
  .text-xs-md   { font-size: var(--text-xs); }
  .text-sm-md   { font-size: var(--text-sm); }
  .text-base-md { font-size: var(--text-base); }
  .text-lg-md   { font-size: var(--text-lg); }
  .text-xl-md   { font-size: var(--text-xl); }
  .text-2xl-md  { font-size: var(--text-2xl); }
  .text-3xl-md  { font-size: var(--text-3xl); }
  .text-4xl-md  { font-size: var(--text-4xl); }
  .text-5xl-md  { font-size: var(--text-5xl); }
  .text-6xl-md  { font-size: var(--text-6xl); }
  .text-7xl-md  { font-size: var(--text-7xl); }

  /* Width */
  .w-full-md { width: 100%; }
  .w-auto-md { width: auto; }

}


/* ============================================================
   RESPONSIVE VARIANTS — lg (min-width: 1024px)
   Suffix convention: .utility-lg
   ============================================================ */

@media (min-width: 1024px) {

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

  /* Flex */
  .flex-row-lg { flex-direction: row; }
  .flex-col-lg { flex-direction: column; }

  /* Justify */
  .justify-start-lg   { justify-content: flex-start; }
  .justify-end-lg     { justify-content: flex-end; }
  .justify-center-lg  { justify-content: center; }
  .justify-between-lg { justify-content: space-between; }

  /* Align */
  .items-start-lg   { align-items: flex-start; }
  .items-end-lg     { align-items: flex-end; }
  .items-center-lg  { align-items: center; }
  .items-stretch-lg { align-items: stretch; }

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

  /* Typography */
  .text-xs-lg   { font-size: var(--text-xs); }
  .text-sm-lg   { font-size: var(--text-sm); }
  .text-base-lg { font-size: var(--text-base); }
  .text-lg-lg   { font-size: var(--text-lg); }
  .text-xl-lg   { font-size: var(--text-xl); }
  .text-2xl-lg  { font-size: var(--text-2xl); }
  .text-3xl-lg  { font-size: var(--text-3xl); }
  .text-4xl-lg  { font-size: var(--text-4xl); }
  .text-5xl-lg  { font-size: var(--text-5xl); }
  .text-6xl-lg  { font-size: var(--text-6xl); }
  .text-7xl-lg  { font-size: var(--text-7xl); }

  /* Width */
  .w-full-lg { width: 100%; }
  .w-auto-lg { width: auto; }

}