:root {
/* spacing */ 
--spacing: 0.25rem;

/* breakpoint */ 
--breakpoint-sm: 40rem;
--breakpoint-md: 48rem;
--breakpoint-lg: 64rem;
--breakpoint-xl: 80rem;
--breakpoint-2xl: 96rem;

/* container */ 
--container-3xs: 16rem;
--container-2xs: 18rem;
--container-xs: 20rem;
--container-sm: 24rem;
--container-md: 28rem;
--container-lg: 32rem;
--container-xl: 36rem;
--container-2xl: 42rem;
--container-3xl: 48rem;
--container-4xl: 56rem;
--container-5xl: 64rem;
--container-6xl: 72rem;
--container-7xl: 80rem;

/* text */ 
--text-xs: 0.923rem;              /* 12 px */
--text-xs--line-height: 1.231rem;
--text-sm: 1.077rem;              /* 14 px */
--text-sm--line-height: 1.538rem;
--text-base: 1.231rem;            /* 16 px */
--text-base--line-height: 1.846rem;
--text-lg: 1.385rem;
--text-lg--line-height: 2.154rem;
--text-xl: 1.538rem;
--text-xl--line-height: 2.154rem;
--text-2xl: 1.923rem;             /* 25 px */
--text-2xl--line-height: 2.5rem;
--text-3xl: 2.308rem;
--text-3xl--line-height: 2.769rem;
--text-4xl: 2.769rem;
--text-4xl--line-height: 3.077rem;
--text-5xl: 3.692rem;
--text-5xl--line-height: 3.692rem;
--text-6xl: 4.615rem;
--text-6xl--line-height: 4.615rem;
--text-7xl: 5.538rem;
--text-7xl--line-height: 5.538rem;
--text-8xl: 7.385rem;
--text-8xl--line-height: 7.385rem;
--text-9xl: 9.846rem;
--text-9xl--line-height: 9.846rem;

/* Colors */ 
--color-black: #000;
--color-white: #fff;

--color-gray-50:  #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5db;
--color-gray-400: #9ca3af;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-700: #374151;
--color-gray-800: #1f2937;
--color-gray-900: #111827;
--color-gray-950: #030712;

--color-blue-50:  #f0f7ff;
--color-blue-100: #e1efff;
--color-blue-200: #c3dfff;
--color-blue-300: #93c5fd;
--color-blue-400: #60a5fa;
--color-blue-500: #3b82f6;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
--color-blue-800: #1e40af;
--color-blue-900: #1e3a8a;
--color-blue-950: #172554;

--color-green-50:  #f0fdf4;
--color-green-100: #dcfce7;
--color-green-200: #bbf7d0;
--color-green-300: #86efac;
--color-green-400: #4ade80;
--color-green-500: #22c55e;
--color-green-600: #16a34a;
--color-green-700: #15803d;
--color-green-800: #166534;
--color-green-900: #14532d;
--color-green-950: #052e16;

--color-yellow-50:  #fefce8;
--color-yellow-100: #fef9c3;
--color-yellow-200: #fef08a;
--color-yellow-300: #fde047;
--color-yellow-400: #facc15;
--color-yellow-500: #eab308;
--color-yellow-600: #ca8a04;
--color-yellow-700: #a16207;
--color-yellow-800: #854d0e;
--color-yellow-900: #713f12;
--color-yellow-950: #422006;

--color-red-50:  #fef2f2;
--color-red-100: #fee2e2;
--color-red-200: #fecaca;
--color-red-300: #fca5a5;
--color-red-400: #f87171;
--color-red-500: #ef4444;
--color-red-600: #dc2626;
--color-red-700: #b91c1c;
--color-red-800: #991b1b;
--color-red-900: #7f1d1d;
--color-red-950: #450a0a;

/* Weights */ 
--font-weight-thin:       100;
--font-weight-extralight: 200;
--font-weight-light:      300;
--font-weight-normal:     400;
--font-weight-medium:     500;
--font-weight-semibold:   600;
--font-weight-bold:       700;
--font-weight-extrabold:  800;
--font-weight-black:      900;

/* Shadows */ 
--shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
--shadow-xs:  0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-sm:  0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--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);
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

--inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
--inset-shadow-xs:  inset 0 1px 1px rgb(0 0 0 / 0.05);
--inset-shadow-sm:  inset 0 2px 4px rgb(0 0 0 / 0.05);

--drop-shadow-xs:  0 1px 1px rgb(0 0 0 / 0.05);
--drop-shadow-sm:  0 1px 2px rgb(0 0 0 / 0.15);
--drop-shadow-md:  0 3px 3px rgb(0 0 0 / 0.12);
--drop-shadow-lg:  0 4px 4px rgb(0 0 0 / 0.15);
--drop-shadow-xl:  0 9px 7px rgb(0 0 0 / 0.1);
--drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);

/* Radius */ 
--radius-xs:  0.125rem;
--radius-sm:  0.25rem;
--radius-md:  0.375rem;
--radius-lg:  0.5rem;
--radius-xl:  0.75rem;
--radius-2xl: 1rem;
--radius-3xl: 1.5rem;
--radius-4xl: 2rem;

}


/* Background color classes */
.bg-gray-50 { background-color: var(--color-gray-50); }
.bg-gray-100 { background-color: var(--color-gray-100); }
.bg-gray-200 { background-color: var(--color-gray-200); }
.bg-gray-300 { background-color: var(--color-gray-300); }
.bg-gray-400 { background-color: var(--color-gray-400); }
.bg-gray-500 { background-color: var(--color-gray-500); }
.bg-gray-600 { background-color: var(--color-gray-600); }
.bg-gray-700 { background-color: var(--color-gray-700); }
.bg-gray-800 { background-color: var(--color-gray-800); }
.bg-gray-900 { background-color: var(--color-gray-900); }
.bg-gray-950 { background-color: var(--color-gray-950); }

.bg-blue-50 { background-color: var(--color-blue-50); }
.bg-blue-100 { background-color: var(--color-blue-100); }
.bg-blue-200 { background-color: var(--color-blue-200); }
.bg-blue-300 { background-color: var(--color-blue-300); }
.bg-blue-400 { background-color: var(--color-blue-400); }
.bg-blue-500 { background-color: var(--color-blue-500); }
.bg-blue-600 { background-color: var(--color-blue-600); }
.bg-blue-700 { background-color: var(--color-blue-700); }
.bg-blue-800 { background-color: var(--color-blue-800); }
.bg-blue-900 { background-color: var(--color-blue-900); }
.bg-blue-950 { background-color: var(--color-blue-950); }

.bg-green-50 { background-color: var(--color-green-50); }
.bg-green-100 { background-color: var(--color-green-100); }
.bg-green-200 { background-color: var(--color-green-200); }
.bg-green-300 { background-color: var(--color-green-300); }
.bg-green-400 { background-color: var(--color-green-400); }
.bg-green-500 { background-color: var(--color-green-500); }
.bg-green-600 { background-color: var(--color-green-600); }
.bg-green-700 { background-color: var(--color-green-700); }
.bg-green-800 { background-color: var(--color-green-800); }
.bg-green-900 { background-color: var(--color-green-900); }
.bg-green-950 { background-color: var(--color-green-950); }

.bg-yellow-50 { background-color: var(--color-yellow-50); }
.bg-yellow-100 { background-color: var(--color-yellow-100); }
.bg-yellow-200 { background-color: var(--color-yellow-200); }
.bg-yellow-300 { background-color: var(--color-yellow-300); }
.bg-yellow-400 { background-color: var(--color-yellow-400); }
.bg-yellow-500 { background-color: var(--color-yellow-500); }
.bg-yellow-600 { background-color: var(--color-yellow-600); }
.bg-yellow-700 { background-color: var(--color-yellow-700); }
.bg-yellow-800 { background-color: var(--color-yellow-800); }
.bg-yellow-900 { background-color: var(--color-yellow-900); }
.bg-yellow-950 { background-color: var(--color-yellow-950); }

.bg-red-50 { background-color: var(--color-red-50); }
.bg-red-100 { background-color: var(--color-red-100); }
.bg-red-200 { background-color: var(--color-red-200); }
.bg-red-300 { background-color: var(--color-red-300); }
.bg-red-400 { background-color: var(--color-red-400); }
.bg-red-500 { background-color: var(--color-red-500); }
.bg-red-600 { background-color: var(--color-red-600); }
.bg-red-700 { background-color: var(--color-red-700); }
.bg-red-800 { background-color: var(--color-red-800); }
.bg-red-900 { background-color: var(--color-red-900); }
.bg-red-950 { background-color: var(--color-red-950); }

/* Text color classes */
.text-green-50 { color: var(--color-green-50); }
.text-green-100 { color: var(--color-green-100); }
.text-green-200 { color: var(--color-green-200); }
.text-green-300 { color: var(--color-green-300); }
.text-green-400 { color: var(--color-green-400); }
.text-green-500 { color: var(--color-green-500); }
.text-green-600 { color: var(--color-green-600); }
.text-green-700 { color: var(--color-green-700); }
.text-green-800 { color: var(--color-green-800); }
.text-green-900 { color: var(--color-green-900); }
.text-green-950 { color: var(--color-green-950); }

.text-gray-50 { color: var(--color-gray-50); }
.text-gray-100 { color: var(--color-gray-100); }
.text-gray-200 { color: var(--color-gray-200); }
.text-gray-300 { color: var(--color-gray-300); }
.text-gray-400 { color: var(--color-gray-400); }
.text-gray-500 { color: var(--color-gray-500); }
.text-gray-600 { color: var(--color-gray-600); }
.text-gray-700 { color: var(--color-gray-700); }
.text-gray-800 { color: var(--color-gray-800); }
.text-gray-900 { color: var(--color-gray-900); }
.text-gray-950 { color: var(--color-gray-950); }

.text-green-50 { color: var(--color-green-50); }
.text-green-100 { color: var(--color-green-100); }
.text-green-200 { color: var(--color-green-200); }
.text-green-300 { color: var(--color-green-300); }
.text-green-400 { color: var(--color-green-400); }
.text-green-500 { color: var(--color-green-500); }
.text-green-600 { color: var(--color-green-600); }
.text-green-700 { color: var(--color-green-700); }
.text-green-800 { color: var(--color-green-800); }
.text-green-900 { color: var(--color-green-900); }
.text-green-950 { color: var(--color-green-950); }

.text-blue-50 { color: var(--color-blue-50); }
.text-blue-100 { color: var(--color-blue-100); }
.text-blue-200 { color: var(--color-blue-200); }
.text-blue-300 { color: var(--color-blue-300); }
.text-blue-400 { color: var(--color-blue-400); }
.text-blue-500 { color: var(--color-blue-500); }
.text-blue-600 { color: var(--color-blue-600); }
.text-blue-700 { color: var(--color-blue-700); }
.text-blue-800 { color: var(--color-blue-800); }
.text-blue-900 { color: var(--color-blue-900); }
.text-blue-950 { color: var(--color-blue-950); }

.text-yellow-50 { color: var(--color-yellow-50); }
.text-yellow-100 { color: var(--color-yellow-100); }
.text-yellow-200 { color: var(--color-yellow-200); }
.text-yellow-300 { color: var(--color-yellow-300); }
.text-yellow-400 { color: var(--color-yellow-400); }    
.text-yellow-500 { color: var(--color-yellow-500); }
.text-yellow-600 { color: var(--color-yellow-600); }
.text-yellow-700 { color: var(--color-yellow-700); }
.text-yellow-800 { color: var(--color-yellow-800); }
.text-yellow-900 { color: var(--color-yellow-900); }
.text-yellow-950 { color: var(--color-yellow-950); }

.text-red-50 { color: var(--color-red-50); }
.text-red-100 { color: var(--color-red-100); }
.text-red-200 { color: var(--color-red-200); }
.text-red-300 { color: var(--color-red-300); }
.text-red-400 { color: var(--color-red-400); }
.text-red-500 { color: var(--color-red-500); }
.text-red-600 { color: var(--color-red-600); }
.text-red-700 { color: var(--color-red-700); }
.text-red-800 { color: var(--color-red-800); }
.text-red-900 { color: var(--color-red-900); }
.text-red-950 { color: var(--color-red-950); }

/* Border color classes */
.border-gray-50 { border-color: var(--color-gray-50); }
.border-gray-100 { border-color: var(--color-gray-100); }
.border-gray-200 { border-color: var(--color-gray-200); }
.border-gray-300 { border-color: var(--color-gray-300); }
.border-gray-400 { border-color: var(--color-gray-400); }
.border-gray-500 { border-color: var(--color-gray-500); }
.border-gray-600 { border-color: var(--color-gray-600); }
.border-gray-700 { border-color: var(--color-gray-700); }
.border-gray-800 { border-color: var(--color-gray-800); }
.border-gray-900 { border-color: var(--color-gray-900); }
.border-gray-950 { border-color: var(--color-gray-950); }

.border-blue-50 { border-color: var(--color-blue-50); }
.border-blue-100 { border-color: var(--color-blue-100); }
.border-blue-200 { border-color: var(--color-blue-200); }
.border-blue-300 { border-color: var(--color-blue-300); }
.border-blue-400 { border-color: var(--color-blue-400); }
.border-blue-500 { border-color: var(--color-blue-500); }
.border-blue-600 { border-color: var(--color-blue-600); }
.border-blue-700 { border-color: var(--color-blue-700); }
.border-blue-800 { border-color: var(--color-blue-800); }
.border-blue-900 { border-color: var(--color-blue-900); }
.border-blue-950 { border-color: var(--color-blue-950); }

.border-green-50 { border-color: var(--color-green-50); }
.border-green-100 { border-color: var(--color-green-100); }
.border-green-200 { border-color: var(--color-green-200); }
.border-green-300 { border-color: var(--color-green-300); }
.border-green-400 { border-color: var(--color-green-400); }
.border-green-500 { border-color: var(--color-green-500); }
.border-green-600 { border-color: var(--color-green-600); }
.border-green-700 { border-color: var(--color-green-700); }
.border-green-800 { border-color: var(--color-green-800); }
.border-green-900 { border-color: var(--color-green-900); }
.border-green-950 { border-color: var(--color-green-950); }

.border-yellow-50 { border-color: var(--color-yellow-50); }
.border-yellow-100 { border-color: var(--color-yellow-100); }
.border-yellow-200 { border-color: var(--color-yellow-200); }
.border-yellow-300 { border-color: var(--color-yellow-300); }
.border-yellow-400 { border-color: var(--color-yellow-400); }
.border-yellow-500 { border-color: var(--color-yellow-500); }
.border-yellow-600 { border-color: var(--color-yellow-600); }
.border-yellow-700 { border-color: var(--color-yellow-700); }
.border-yellow-800 { border-color: var(--color-yellow-800); }
.border-yellow-900 { border-color: var(--color-yellow-900); }
.border-yellow-950 { border-color: var(--color-yellow-950); }

.border-red-50 { border-color: var(--color-red-50); }
.border-red-100 { border-color: var(--color-red-100); }
.border-red-200 { border-color: var(--color-red-200); }
.border-red-300 { border-color: var(--color-red-300); }
.border-red-400 { border-color: var(--color-red-400); }
.border-red-500 { border-color: var(--color-red-500); }
.border-red-600 { border-color: var(--color-red-600); }
.border-red-700 { border-color: var(--color-red-700); }
.border-red-800 { border-color: var(--color-red-800); }
.border-red-900 { border-color: var(--color-red-900); }
.border-red-950 { border-color: var(--color-red-950); }

/* Border radius classes */
.rounded-none { border-radius: 0; }
.rounded-xs { border-radius: var(--radius-xs); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-3xl { border-radius: var(--radius-3xl); }
.rounded-4xl { border-radius: var(--radius-4xl); }
.rounded-full { border-radius: 9999px; }

/* Hover Border Blue Utility Classes */
.hover\:border-blue-50:hover { border-color: var(--color-blue-50); }
.hover\:border-blue-100:hover { border-color: var(--color-blue-100); }
.hover\:border-blue-200:hover { border-color: var(--color-blue-200); }
.hover\:border-blue-300:hover { border-color: var(--color-blue-300); }
.hover\:border-blue-400:hover { border-color: var(--color-blue-400); }
.hover\:border-blue-500:hover { border-color: var(--color-blue-500); }
.hover\:border-blue-600:hover { border-color: var(--color-blue-600); }
.hover\:border-blue-700:hover { border-color: var(--color-blue-700); }
.hover\:border-blue-800:hover { border-color: var(--color-blue-800); }
.hover\:border-blue-900:hover { border-color: var(--color-blue-900); }
.hover\:border-blue-950:hover { border-color: var(--color-blue-950); }
.hover\:cursor-pointer:hover { cursor: pointer; }

.text-white { color: var(--color-white); }

/* Margin Utility Classes - All sides */
.m-0 { margin: calc(var(--spacing)*0) }
.m-1 { margin: calc(var(--spacing)*1) }
.m-2 { margin: calc(var(--spacing)*2) }
.m-3 { margin: calc(var(--spacing)*3) }
.m-4 { margin: calc(var(--spacing)*4) }
.m-5 { margin: calc(var(--spacing)*5) }
.m-6 { margin: calc(var(--spacing)*6) }
.m-7 { margin: calc(var(--spacing)*7) }
.m-8 { margin: calc(var(--spacing)*8) }
.m-9 { margin: calc(var(--spacing)*9) }
.m-10 { margin: calc(var(--spacing)*10) }

/* Margin Utility Classes - Top side */
.mt-0 { margin-top: calc(var(--spacing)*0) }
.mt-1 { margin-top: calc(var(--spacing)*1) }
.mt-2 { margin-top: calc(var(--spacing)*2) }
.mt-3 { margin-top: calc(var(--spacing)*3) }
.mt-4 { margin-top: calc(var(--spacing)*4) }
.mt-5 { margin-top: calc(var(--spacing)*5) }
.mt-6 { margin-top: calc(var(--spacing)*6) }
.mt-7 { margin-top: calc(var(--spacing)*7) }
.mt-8 { margin-top: calc(var(--spacing)*8) }
.mt-9 { margin-top: calc(var(--spacing)*9) }
.mt-10 { margin-top: calc(var(--spacing)*10) }

/* Margin Utility Classes - Right side */
.mr-0 { margin-right: calc(var(--spacing)*0) }
.mr-1 { margin-right: calc(var(--spacing)*1) }
.mr-2 { margin-right: calc(var(--spacing)*2) }
.mr-3 { margin-right: calc(var(--spacing)*3) }
.mr-4 { margin-right: calc(var(--spacing)*4) }
.mr-5 { margin-right: calc(var(--spacing)*5) }
.mr-6 { margin-right: calc(var(--spacing)*6) }
.mr-7 { margin-right: calc(var(--spacing)*7) }
.mr-8 { margin-right: calc(var(--spacing)*8) }
.mr-9 { margin-right: calc(var(--spacing)*9) }
.mr-10 { margin-right: calc(var(--spacing)*10) }

/* Margin Utility Classes - Bottom side */
.mb-0 { margin-bottom: calc(var(--spacing)*0) }
.mb-1 { margin-bottom: calc(var(--spacing)*1) }
.mb-2 { margin-bottom: calc(var(--spacing)*2) }
.mb-3 { margin-bottom: calc(var(--spacing)*3) }
.mb-4 { margin-bottom: calc(var(--spacing)*4) }
.mb-5 { margin-bottom: calc(var(--spacing)*5) }
.mb-6 { margin-bottom: calc(var(--spacing)*6) }
.mb-7 { margin-bottom: calc(var(--spacing)*7) }
.mb-8 { margin-bottom: calc(var(--spacing)*8) }
.mb-9 { margin-bottom: calc(var(--spacing)*9) }
.mb-10 { margin-bottom: calc(var(--spacing)*10) }

/* Margin Utility Classes - Left side */
.ml-0 { margin-left: calc(var(--spacing)*0) }
.ml-1 { margin-left: calc(var(--spacing)*1) }
.ml-2 { margin-left: calc(var(--spacing)*2) }
.ml-3 { margin-left: calc(var(--spacing)*3) }
.ml-4 { margin-left: calc(var(--spacing)*4) }
.ml-5 { margin-left: calc(var(--spacing)*5) }
.ml-6 { margin-left: calc(var(--spacing)*6) }
.ml-7 { margin-left: calc(var(--spacing)*7) }
.ml-8 { margin-left: calc(var(--spacing)*8) }
.ml-9 { margin-left: calc(var(--spacing)*9) }
.ml-10 { margin-left: calc(var(--spacing)*10) }

/* Padding Utility Classes - All sides */
.p-0 { padding: calc(var(--spacing)*0) !important }
.p-1 { padding: calc(var(--spacing)*1) }
.p-2 { padding: calc(var(--spacing)*2) }
.p-3 { padding: calc(var(--spacing)*3) }
.p-4 { padding: calc(var(--spacing)*4) }
.p-5 { padding: calc(var(--spacing)*5) }
.p-6 { padding: calc(var(--spacing)*6) }
.p-7 { padding: calc(var(--spacing)*7) }
.p-8 { padding: calc(var(--spacing)*8) }
.p-9 { padding: calc(var(--spacing)*9) }
.p-10 { padding: calc(var(--spacing)*10) }

/* Padding Utility Classes - Top side */
.pt-0 { padding-top: calc(var(--spacing)*0) }
.pt-1 { padding-top: calc(var(--spacing)*1) }
.pt-2 { padding-top: calc(var(--spacing)*2) }
.pt-3 { padding-top: calc(var(--spacing)*3) }
.pt-4 { padding-top: calc(var(--spacing)*4) }
.pt-5 { padding-top: calc(var(--spacing)*5) }
.pt-6 { padding-top: calc(var(--spacing)*6) }
.pt-7 { padding-top: calc(var(--spacing)*7) }
.pt-8 { padding-top: calc(var(--spacing)*8) }
.pt-9 { padding-top: calc(var(--spacing)*9) }
.pt-10 { padding-top: calc(var(--spacing)*10) }

/* Padding Utility Classes - Bottom side */
.pb-0 { padding-bottom: calc(var(--spacing)*0) }
.pb-1 { padding-bottom: calc(var(--spacing)*1) }
.pb-2 { padding-bottom: calc(var(--spacing)*2) }
.pb-3 { padding-bottom: calc(var(--spacing)*3) }
.pb-4 { padding-bottom: calc(var(--spacing)*4) }
.pb-5 { padding-bottom: calc(var(--spacing)*5) }
.pb-6 { padding-bottom: calc(var(--spacing)*6) }
.pb-7 { padding-bottom: calc(var(--spacing)*7) }
.pb-8 { padding-bottom: calc(var(--spacing)*8) }
.pb-9 { padding-bottom: calc(var(--spacing)*9) }
.pb-10 { padding-bottom: calc(var(--spacing)*10) }

/* Padding Utility Classes - Right side */
.pr-0 { padding-right: calc(var(--spacing)*0) }
.pr-1 { padding-right: calc(var(--spacing)*1) }
.pr-2 { padding-right: calc(var(--spacing)*2) }
.pr-3 { padding-right: calc(var(--spacing)*3) }
.pr-4 { padding-right: calc(var(--spacing)*4) }
.pr-5 { padding-right: calc(var(--spacing)*5) }
.pr-6 { padding-right: calc(var(--spacing)*6) }
.pr-7 { padding-right: calc(var(--spacing)*7) }
.pr-8 { padding-right: calc(var(--spacing)*8) }
.pr-9 { padding-right: calc(var(--spacing)*9) }
.pr-10 { padding-right: calc(var(--spacing)*10) }

/* Padding Utility Classes - Left side */
.pl-0 { padding-left: calc(var(--spacing)*0) }
.pl-1 { padding-left: calc(var(--spacing)*1) }
.pl-2 { padding-left: calc(var(--spacing)*2) }
.pl-3 { padding-left: calc(var(--spacing)*3) }
.pl-4 { padding-left: calc(var(--spacing)*4) }
.pl-5 { padding-left: calc(var(--spacing)*5) }
.pl-6 { padding-left: calc(var(--spacing)*6) }
.pl-7 { padding-left: calc(var(--spacing)*7) }
.pl-8 { padding-left: calc(var(--spacing)*8) }
.pl-9 { padding-left: calc(var(--spacing)*9) }
.pl-10 { padding-left: calc(var(--spacing)*10) }

/* Flexbox Utilities */
.flex { display: flex }
.inline-flex { display: inline-flex }
.flex-row { flex-direction: row }
.flex-row-reverse { flex-direction: row-reverse }
.flex-col { flex-direction: column }
.flex-col-reverse { flex-direction: column-reverse }
.flex-wrap { flex-wrap: wrap }
.flex-nowrap { flex-wrap: nowrap }
.flex-wrap-reverse { flex-wrap: wrap-reverse }

/* Flex Justification */
.justify-start { justify-content: flex-start }
.justify-center { justify-content: center }
.justify-end { justify-content: flex-end }
.justify-between { justify-content: space-between }
.justify-around { justify-content: space-around }
.justify-evenly { justify-content: space-evenly }

/* Flex Alignment */
.items-start { align-items: flex-start }
.items-center { align-items: center }
.items-end { align-items: flex-end }
.items-baseline { align-items: baseline }
.items-stretch { align-items: stretch }

/* Flex Self Alignment */
.self-auto { align-self: auto }
.self-start { align-self: flex-start }
.self-center { align-self: center }
.self-end { align-self: flex-end }
.self-stretch { align-self: stretch }

/* Flex Grow/Shrink */
.flex-grow { flex-grow: 1 }
.flex-grow-0 { flex-grow: 0 }
.flex-shrink { flex-shrink: 1 }
.flex-shrink-0 { flex-shrink: 0 }
.flex-auto { flex: 1 1 auto }
.flex-initial { flex: 0 1 auto }
.flex-none { flex: none }

/* Flex: Numeric values */
.flex-0 { flex: 0; }
.flex-1 { flex: 1; }
.flex-2 { flex: 2; }
.flex-3 { flex: 3; }
.flex-4 { flex: 4; }
.flex-5 { flex: 5; }
.flex-6 { flex: 6; }
.flex-7 { flex: 7; }
.flex-8 { flex: 8; }
.flex-9 { flex: 9; }
.flex-10 { flex: 10; }

/* Flex: Fractional values (used as % of container) */
.flex-1\/2 { flex: calc(1 / 2 * 100%); }
.flex-1\/3 { flex: calc(1 / 3 * 100%); }
.flex-2\/3 { flex: calc(2 / 3 * 100%); }
.flex-1\/4 { flex: calc(1 / 4 * 100%); }
.flex-3\/4 { flex: calc(3 / 4 * 100%); }
.flex-1\/5 { flex: calc(1 / 5 * 100%); }
.flex-2\/5 { flex: calc(2 / 5 * 100%); }
.flex-3\/5 { flex: calc(3 / 5 * 100%); }
.flex-4\/5 { flex: calc(4 / 5 * 100%); }
.flex-1\/6 { flex: calc(1 / 6 * 100%); }
.flex-5\/6 { flex: calc(5 / 6 * 100%); }

/* Tailwind-native values */
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }

/* Content Alignment */
.content-start { align-content: flex-start }
.content-center { align-content: center }
.content-end { align-content: flex-end }
.content-between { align-content: space-between }
.content-around { align-content: space-around }
.content-evenly { align-content: space-evenly }

/* Text Size Utilities */
.text-xs { font-size: var(--text-xs); line-height: var(--text-xs--line-height); }
.text-sm { font-size: var(--text-sm); line-height: var(--text-sm--line-height); }
.text-base { font-size: var(--text-base); line-height: var(--text-base--line-height); }
.text-lg { font-size: var(--text-lg); line-height: var(--text-lg--line-height); }
.text-xl { font-size: var(--text-xl); line-height: var(--text-xl--line-height); }
.text-2xl { font-size: var(--text-2xl); line-height: var(--text-2xl--line-height); }
.text-3xl { font-size: var(--text-3xl); line-height: var(--text-3xl--line-height); }
.text-4xl { font-size: var(--text-4xl); line-height: var(--text-4xl--line-height); }
.text-5xl { font-size: var(--text-5xl); line-height: var(--text-5xl--line-height); }
.text-6xl { font-size: var(--text-6xl); line-height: var(--text-6xl--line-height); }
.text-7xl { font-size: var(--text-7xl); line-height: var(--text-7xl--line-height); }
.text-8xl { font-size: var(--text-8xl); line-height: var(--text-8xl--line-height); }
.text-9xl { font-size: var(--text-9xl); line-height: var(--text-9xl--line-height); }

/* Font Weight Utilities */
.font-thin { font-weight: var(--font-weight-thin); }
.font-extralight { font-weight: var(--font-weight-extralight); }
.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.font-extrabold { font-weight: var(--font-weight-extrabold); }
.font-black { font-weight: var(--font-weight-black); }

/* Overflow Utilities */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-clip { overflow: clip; }
.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; }
.overflow-x-clip { overflow-x: clip; }
.overflow-y-clip { overflow-y: clip; }
.overflow-x-visible { overflow-x: visible; }
.overflow-y-visible { overflow-y: visible; }
.overflow-x-scroll { overflow-x: scroll; }
.overflow-y-scroll { overflow-y: scroll; }

/* Gap Utility Classes - Columns and Rows */
.gap-0 { gap: calc(var(--spacing)*0) }
.gap-1 { gap: calc(var(--spacing)*1) }
.gap-2 { gap: calc(var(--spacing)*2) }
.gap-3 { gap: calc(var(--spacing)*3) }
.gap-4 { gap: calc(var(--spacing)*4) }
.gap-5 { gap: calc(var(--spacing)*5) }
.gap-6 { gap: calc(var(--spacing)*6) }
.gap-7 { gap: calc(var(--spacing)*7) }
.gap-8 { gap: calc(var(--spacing)*8) }
.gap-9 { gap: calc(var(--spacing)*9) }
.gap-10 { gap: calc(var(--spacing)*10) }

/* Gap Utility Classes - Columns */
.gap-x-0 { column-gap: calc(var(--spacing)*0) }
.gap-x-1 { column-gap: calc(var(--spacing)*1) }
.gap-x-2 { column-gap: calc(var(--spacing)*2) }
.gap-x-3 { column-gap: calc(var(--spacing)*3) }
.gap-x-4 { column-gap: calc(var(--spacing)*4) }
.gap-x-5 { column-gap: calc(var(--spacing)*5) }
.gap-x-6 { column-gap: calc(var(--spacing)*6) }
.gap-x-7 { column-gap: calc(var(--spacing)*7) }
.gap-x-8 { column-gap: calc(var(--spacing)*8) }
.gap-x-9 { column-gap: calc(var(--spacing)*9) }
.gap-x-10 { column-gap: calc(var(--spacing)*10) }

/* Gap Utility Classes - Rows */
.gap-y-0 { row-gap: calc(var(--spacing)*0) }
.gap-y-1 { row-gap: calc(var(--spacing)*1) }
.gap-y-2 { row-gap: calc(var(--spacing)*2) }
.gap-y-3 { row-gap: calc(var(--spacing)*3) }
.gap-y-4 { row-gap: calc(var(--spacing)*4) }
.gap-y-5 { row-gap: calc(var(--spacing)*5) }
.gap-y-6 { row-gap: calc(var(--spacing)*6) }
.gap-y-7 { row-gap: calc(var(--spacing)*7) }
.gap-y-8 { row-gap: calc(var(--spacing)*8) }
.gap-y-9 { row-gap: calc(var(--spacing)*9) }
.gap-y-10 { row-gap: calc(var(--spacing)*10) }

/*  Width: Based on spacing unit */
.w-0 { width: 0; }
.w-1 { width: calc(var(--spacing) * 1); }
.w-2 { width: calc(var(--spacing) * 2); }
.w-3 { width: calc(var(--spacing) * 3); }
.w-4 { width: calc(var(--spacing) * 4); }
.w-5 { width: calc(var(--spacing) * 5); }
.w-6 { width: calc(var(--spacing) * 6); }
.w-8 { width: calc(var(--spacing) * 8); }
.w-10 { width: calc(var(--spacing) * 10); }
.w-12 { width: calc(var(--spacing) * 12); }
.w-16 { width: calc(var(--spacing) * 16); }
.w-20 { width: calc(var(--spacing) * 20); }
.w-24 { width: calc(var(--spacing) * 24); }
.w-32 { width: calc(var(--spacing) * 32); }

/*  Width: Fractions */
.w-1\/2 { width: calc(1 / 2 * 100%); }
.w-1\/3 { width: calc(1 / 3 * 100%); }
.w-2\/3 { width: calc(2 / 3 * 100%); }
.w-1\/4 { width: calc(1 / 4 * 100%); }
.w-3\/4 { width: calc(3 / 4 * 100%); }
.w-1\/5 { width: calc(1 / 5 * 100%); }
.w-2\/5 { width: calc(2 / 5 * 100%); }
.w-3\/5 { width: calc(3 / 5 * 100%); }
.w-4\/5 { width: calc(4 / 5 * 100%); }
.w-1\/6 { width: calc(1 / 6 * 100%); }
.w-5\/6 { width: calc(5 / 6 * 100%); }

/* Width: Container-based */
.w-3xs { width: var(--container-3xs); }
.w-2xs { width: var(--container-2xs); }
.w-xs { width: var(--container-xs); }
.w-sm { width: var(--container-sm); }
.w-md { width: var(--container-md); }
.w-lg { width: var(--container-lg); }
.w-xl { width: var(--container-xl); }
.w-2xl { width: var(--container-2xl); }
.w-3xl { width: var(--container-3xl); }
.w-4xl { width: var(--container-4xl); }
.w-5xl { width: var(--container-5xl); }
.w-6xl { width: var(--container-6xl); }
.w-7xl { width: var(--container-7xl); }

/* Width: Static keywords */
.w-auto { width: auto; }
.w-px { width: 1px; }
.w-full { width: 100%; }
.w-screen { width: 100vw; }

/*  Width: Viewport units (new CSS units) */
.w-dvw { width: 100dvw; }
.w-dvh { width: 100dvh; }
.w-lvw { width: 100lvw; }
.w-lvh { width: 100lvh; }
.w-svw { width: 100svw; }
.w-svh { width: 100svh; }

/* Width: Content-based */
.w-min { width: min-content; }
.w-max { width: max-content; }
.w-fit { width: fit-content; }

/* min-width: Based on spacing scale */
.min-w-0 { min-width: 0; }
.min-w-1 { min-width: calc(var(--spacing) * 1); }
.min-w-2 { min-width: calc(var(--spacing) * 2); }
.min-w-3 { min-width: calc(var(--spacing) * 3); }
.min-w-4 { min-width: calc(var(--spacing) * 4); }
.min-w-5 { min-width: calc(var(--spacing) * 5); }
.min-w-6 { min-width: calc(var(--spacing) * 6); }
.min-w-8 { min-width: calc(var(--spacing) * 8); }
.min-w-10 { min-width: calc(var(--spacing) * 10); }
.min-w-12 { min-width: calc(var(--spacing) * 12); }
.min-w-16 { min-width: calc(var(--spacing) * 16); }
.min-w-20 { min-width: calc(var(--spacing) * 20); }
.min-w-24 { min-width: calc(var(--spacing) * 24); }
.min-w-32 { min-width: calc(var(--spacing) * 32); }

/* min-width: Fractional */
.min-w-1\/2 { min-width: calc(1 / 2 * 100%); }
.min-w-1\/3 { min-width: calc(1 / 3 * 100%); }
.min-w-2\/3 { min-width: calc(2 / 3 * 100%); }
.min-w-1\/4 { min-width: calc(1 / 4 * 100%); }
.min-w-3\/4 { min-width: calc(3 / 4 * 100%); }
.min-w-1\/5 { min-width: calc(1 / 5 * 100%); }
.min-w-2\/5 { min-width: calc(2 / 5 * 100%); }
.min-w-3\/5 { min-width: calc(3 / 5 * 100%); }
.min-w-4\/5 { min-width: calc(4 / 5 * 100%); }
.min-w-1\/6 { min-width: calc(1 / 6 * 100%); }
.min-w-5\/6 { min-width: calc(5 / 6 * 100%); }

/* min-width: Container sizes (custom variables) */
.min-w-3xs { min-width: var(--container-3xs); }
.min-w-2xs { min-width: var(--container-2xs); }
.min-w-xs { min-width: var(--container-xs); }
.min-w-sm { min-width: var(--container-sm); }
.min-w-md { min-width: var(--container-md); }
.min-w-lg { min-width: var(--container-lg); }
.min-w-xl { min-width: var(--container-xl); }
.min-w-2xl { min-width: var(--container-2xl); }
.min-w-3xl { min-width: var(--container-3xl); }
.min-w-4xl { min-width: var(--container-4xl); }
.min-w-5xl { min-width: var(--container-5xl); }
.min-w-6xl { min-width: var(--container-6xl); }
.min-w-7xl { min-width: var(--container-7xl); }

/* min-width: Static & viewport-based */
.min-w-auto { min-width: auto; }
.min-w-px { min-width: 1px; }
.min-w-full { min-width: 100%; }
.min-w-screen { min-width: 100vw; }
.min-w-dvw { min-width: 100dvw; }
.min-w-dvh { min-width: 100dvh; }
.min-w-lvw { min-width: 100lvw; }
.min-w-lvh { min-width: 100lvh; }
.min-w-svw { min-width: 100svw; }
.min-w-svh { min-width: 100svh; }

/* min-width: Content fitting */
.min-w-min { min-width: min-content; }
.min-w-max { min-width: max-content; }
.min-w-fit { min-width: fit-content; }

/* max-width: Based on spacing scale */
.max-w-0 { max-width: 0; }
.max-w-1 { max-width: calc(var(--spacing) * 1); }
.max-w-2 { max-width: calc(var(--spacing) * 2); }
.max-w-3 { max-width: calc(var(--spacing) * 3); }
.max-w-4 { max-width: calc(var(--spacing) * 4); }
.max-w-5 { max-width: calc(var(--spacing) * 5); }
.max-w-6 { max-width: calc(var(--spacing) * 6); }
.max-w-8 { max-width: calc(var(--spacing) * 8); }
.max-w-10 { max-width: calc(var(--spacing) * 10); }
.max-w-12 { max-width: calc(var(--spacing) * 12); }
.max-w-16 { max-width: calc(var(--spacing) * 16); }
.max-w-20 { max-width: calc(var(--spacing) * 20); }
.max-w-24 { max-width: calc(var(--spacing) * 24); }
.max-w-32 { max-width: calc(var(--spacing) * 32); }

/* max-width: Fractional */
.max-w-1\/2 { max-width: calc(1 / 2 * 100%); }
.max-w-1\/3 { max-width: calc(1 / 3 * 100%); }
.max-w-2\/3 { max-width: calc(2 / 3 * 100%); }
.max-w-1\/4 { max-width: calc(1 / 4 * 100%); }
.max-w-3\/4 { max-width: calc(3 / 4 * 100%); }
.max-w-1\/5 { max-width: calc(1 / 5 * 100%); }
.max-w-2\/5 { max-width: calc(2 / 5 * 100%); }
.max-w-3\/5 { max-width: calc(3 / 5 * 100%); }
.max-w-4\/5 { max-width: calc(4 / 5 * 100%); }
.max-w-1\/6 { max-width: calc(1 / 6 * 100%); }
.max-w-5\/6 { max-width: calc(5 / 6 * 100%); }

/* max-width: Container sizes */
.max-w-3xs { max-width: var(--container-3xs); }
.max-w-2xs { max-width: var(--container-2xs); }
.max-w-xs { max-width: var(--container-xs); }
.max-w-sm { max-width: var(--container-sm); }
.max-w-md { max-width: var(--container-md); }
.max-w-lg { max-width: var(--container-lg); }
.max-w-xl { max-width: var(--container-xl); }
.max-w-2xl { max-width: var(--container-2xl); }
.max-w-3xl { max-width: var(--container-3xl); }
.max-w-4xl { max-width: var(--container-4xl); }
.max-w-5xl { max-width: var(--container-5xl); }
.max-w-6xl { max-width: var(--container-6xl); }
.max-w-7xl { max-width: var(--container-7xl); }

/* max-width: Static & viewport-based */
.max-w-none { max-width: none; }
.max-w-px { max-width: 1px; }
.max-w-full { max-width: 100%; }
.max-w-screen { max-width: 100vw; }
.max-w-dvw { max-width: 100dvw; }
.max-w-dvh { max-width: 100dvh; }
.max-w-lvw { max-width: 100lvw; }
.max-w-lvh { max-width: 100lvh; }
.max-w-svw { max-width: 100svw; }
.max-w-svh { max-width: 100svh; }

/* max-width: Content fitting */
.max-w-min { max-width: min-content; }
.max-w-max { max-width: max-content; }
.max-w-fit { max-width: fit-content; }

.m-auto { margin: auto; }
.mx-auto { margin-inline: auto; }
.my-auto { margin-block: auto; }

/* Regular Shadow Utilities */
.shadow-2xs { box-shadow: var(--shadow-2xs); }
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }

/* Inset Shadow Utilities */
.shadow-inset-2xs { box-shadow: var(--inset-shadow-2xs); }
.shadow-inset-xs { box-shadow: var(--inset-shadow-xs); }
.shadow-inset-sm { box-shadow: var(--inset-shadow-sm); }

/* Drop Shadow Utilities (using filter) */
.drop-shadow-xs { filter: drop-shadow(var(--drop-shadow-xs)); }
.drop-shadow-sm { filter: drop-shadow(var(--drop-shadow-sm)); }
.drop-shadow-md { filter: drop-shadow(var(--drop-shadow-md)); }
.drop-shadow-lg { filter: drop-shadow(var(--drop-shadow-lg)); }
.drop-shadow-xl { filter: drop-shadow(var(--drop-shadow-xl)); }
.drop-shadow-2xl { filter: drop-shadow(var(--drop-shadow-2xl)); }

/* Border Widths */
.border { border-width: 1px; border-style: solid; }
.border-0 { border-width: 0; }
.border-2 { border-width: 2px; }
.border-4 { border-width: 4px; }
.border-8 { border-width: 8px; }

/* Side-specific Border Widths */
.border-t { border-top-width: 1px; border-top-style: solid; }
.border-r { border-right-width: 1px; border-right-style: solid; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-l { border-left-width: 1px; border-left-style: solid; }

.border-t-0 { border-top-width: 0; }
.border-r-0 { border-right-width: 0; }
.border-b-0 { border-bottom-width: 0; }
.border-l-0 { border-left-width: 0; }

.border-t-2 { border-top-width: 2px; }
.border-r-2 { border-right-width: 2px; }
.border-b-2 { border-bottom-width: 2px; }
.border-l-2 { border-left-width: 2px; }

.border-t-4 { border-top-width: 4px; }
.border-r-4 { border-right-width: 4px; }
.border-b-4 { border-bottom-width: 4px; }
.border-l-4 { border-left-width: 4px; }

.border-t-8 { border-top-width: 8px; }
.border-r-8 { border-right-width: 8px; }
.border-b-8 { border-bottom-width: 8px; }
.border-l-8 { border-left-width: 8px; }

/* Border Styles */
.border-solid { border-style: solid; }
.border-dashed { border-style: dashed; }
.border-dotted { border-style: dotted; }
.border-double { border-style: double; }
.border-none { border-style: none; }



/* Border Colors */
.border-gray-50 { border-color: var(--color-gray-50); }
.border-gray-100 { border-color: var(--color-gray-100); }
.border-gray-200 { border-color: var(--color-gray-200); }
.border-gray-300 { border-color: var(--color-gray-300); }
.border-gray-400 { border-color: var(--color-gray-400); }
.border-gray-500 { border-color: var(--color-gray-500); }
.border-gray-600 { border-color: var(--color-gray-600); }
.border-gray-700 { border-color: var(--color-gray-700); }
.border-gray-800 { border-color: var(--color-gray-800); }
.border-gray-900 { border-color: var(--color-gray-900); }
.border-gray-950 { border-color: var(--color-gray-950); }

.border-blue-50 { border-color: var(--color-blue-50); }
.border-blue-100 { border-color: var(--color-blue-100); }
.border-blue-200 { border-color: var(--color-blue-200); }
.border-blue-300 { border-color: var(--color-blue-300); }
.border-blue-400 { border-color: var(--color-blue-400); }
.border-blue-500 { border-color: var(--color-blue-500); }
.border-blue-600 { border-color: var(--color-blue-600); }
.border-blue-700 { border-color: var(--color-blue-700); }
.border-blue-800 { border-color: var(--color-blue-800); }
.border-blue-900 { border-color: var(--color-blue-900); }
.border-blue-950 { border-color: var(--color-blue-950); }

/* Fixed pixel and automatic heights */
.h-px { height: 1px; }
.h-auto { height: auto; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-dvh { height: 100dvh; }
.h-dvw { height: 100dvw; }
.h-lvh { height: 100lvh; }
.h-lvw { height: 100lvw; }
.h-svh { height: 100svh; }
.h-svw { height: 100svw; }
.h-min { height: min-content; }
.h-max { height: max-content; }
.h-fit { height: fit-content; }
.h-lh { height: 1lh; }

/* Fractional heights (percentage based) */
.h-1\/2 { height: 50%; }
.h-1\/3 { height: 33.333333%; }
.h-2\/3 { height: 66.666667%; }
.h-1\/4 { height: 25%; }
.h-3\/4 { height: 75%; }
.h-1\/5 { height: 20%; }
.h-2\/5 { height: 40%; }
.h-3\/5 { height: 60%; }
.h-4\/5 { height: 80%; }
.h-1\/6 { height: 16.666667%; }
.h-5\/6 { height: 83.333333%; }

/* Numeric heights using custom spacing scale */
.h-0 { height: calc(var(--spacing) * 0); }
.h-1 { height: calc(var(--spacing) * 1); }
.h-2 { height: calc(var(--spacing) * 2); }
.h-3 { height: calc(var(--spacing) * 3); }
.h-4 { height: calc(var(--spacing) * 4); }
.h-5 { height: calc(var(--spacing) * 5); }
.h-6 { height: calc(var(--spacing) * 6); }
.h-8 { height: calc(var(--spacing) * 8); }
.h-10 { height: calc(var(--spacing) * 10); }
.h-12 { height: calc(var(--spacing) * 12); }
.h-16 { height: calc(var(--spacing) * 16); }
.h-20 { height: calc(var(--spacing) * 20); }
.h-24 { height: calc(var(--spacing) * 24); }
.h-32 { height: calc(var(--spacing) * 32); }
.h-40 { height: calc(var(--spacing) * 40); }
.h-48 { height: calc(var(--spacing) * 48); }
.h-56 { height: calc(var(--spacing) * 56); }
.h-64 { height: calc(var(--spacing) * 64); }

/* Exact values */
.min-h-px { min-height: 1px; }
.min-h-auto { min-height: auto; }
.min-h-full { min-height: 100%; }
.min-h-screen { min-height: 100vh; }
.min-h-dvh { min-height: 100dvh; }
.min-h-dvw { min-height: 100dvw; }
.min-h-lvh { min-height: 100lvh; }
.min-h-lvw { min-height: 100lvw; }
.min-h-svh { min-height: 100svh; }
.min-h-svw { min-height: 100svw; }
.min-h-min { min-height: min-content; }
.min-h-max { min-height: max-content; }
.min-h-fit { min-height: fit-content; }
.min-h-lh { min-height: 1lh; }

/* Fractional min-heights */
.min-h-1\/2 { min-height: 50%; }
.min-h-1\/3 { min-height: 33.333333%; }
.min-h-2\/3 { min-height: 66.666667%; }
.min-h-1\/4 { min-height: 25%; }
.min-h-3\/4 { min-height: 75%; }
.min-h-1\/5 { min-height: 20%; }
.min-h-2\/5 { min-height: 40%; }
.min-h-3\/5 { min-height: 60%; }
.min-h-4\/5 { min-height: 80%; }
.min-h-1\/6 { min-height: 16.666667%; }
.min-h-5\/6 { min-height: 83.333333%; }

/* Numeric min-heights using spacing scale */
.min-h-0 { min-height: calc(var(--spacing) * 0); }
.min-h-1 { min-height: calc(var(--spacing) * 1); }
.min-h-2 { min-height: calc(var(--spacing) * 2); }
.min-h-3 { min-height: calc(var(--spacing) * 3); }
.min-h-4 { min-height: calc(var(--spacing) * 4); }
.min-h-5 { min-height: calc(var(--spacing) * 5); }
.min-h-6 { min-height: calc(var(--spacing) * 6); }
.min-h-8 { min-height: calc(var(--spacing) * 8); }
.min-h-10 { min-height: calc(var(--spacing) * 10); }
.min-h-12 { min-height: calc(var(--spacing) * 12); }
.min-h-16 { min-height: calc(var(--spacing) * 16); }
.min-h-20 { min-height: calc(var(--spacing) * 20); }
.min-h-24 { min-height: calc(var(--spacing) * 24); }
.min-h-32 { min-height: calc(var(--spacing) * 32); }
.min-h-40 { min-height: calc(var(--spacing) * 40); }
.min-h-48 { min-height: calc(var(--spacing) * 48); }
.min-h-56 { min-height: calc(var(--spacing) * 56); }
.min-h-64 { min-height: calc(var(--spacing) * 64); }

/* Absolute values */
.max-h-none { max-height: none; }
.max-h-px { max-height: 1px; }
.max-h-full { max-height: 100%; }
.max-h-screen { max-height: 100vh; }
.max-h-dvh { max-height: 100dvh; }
.max-h-dvw { max-height: 100dvw; }
.max-h-lvh { max-height: 100lvh; }
.max-h-lvw { max-height: 100lvw; }
.max-h-svh { max-height: 100svh; }
.max-h-svw { max-height: 100svw; }
.max-h-min { max-height: min-content; }
.max-h-max { max-height: max-content; }
.max-h-fit { max-height: fit-content; }
.max-h-lh { max-height: 1lh; }

/* Fractional heights */
.max-h-1\/2 { max-height: 50%; }
.max-h-1\/3 { max-height: 33.333333%; }
.max-h-2\/3 { max-height: 66.666667%; }
.max-h-1\/4 { max-height: 25%; }
.max-h-3\/4 { max-height: 75%; }
.max-h-1\/5 { max-height: 20%; }
.max-h-2\/5 { max-height: 40%; }
.max-h-3\/5 { max-height: 60%; }
.max-h-4\/5 { max-height: 80%; }
.max-h-1\/6 { max-height: 16.666667%; }
.max-h-5\/6 { max-height: 83.333333%; }

/* Spacing scale values */
.max-h-0 { max-height: calc(var(--spacing) * 0); }
.max-h-1 { max-height: calc(var(--spacing) * 1); }
.max-h-2 { max-height: calc(var(--spacing) * 2); }
.max-h-3 { max-height: calc(var(--spacing) * 3); }
.max-h-4 { max-height: calc(var(--spacing) * 4); }
.max-h-5 { max-height: calc(var(--spacing) * 5); }
.max-h-6 { max-height: calc(var(--spacing) * 6); }
.max-h-8 { max-height: calc(var(--spacing) * 8); }
.max-h-10 { max-height: calc(var(--spacing) * 10); }
.max-h-12 { max-height: calc(var(--spacing) * 12); }
.max-h-16 { max-height: calc(var(--spacing) * 16); }
.max-h-20 { max-height: calc(var(--spacing) * 20); }
.max-h-24 { max-height: calc(var(--spacing) * 24); }
.max-h-32 { max-height: calc(var(--spacing) * 32); }
.max-h-40 { max-height: calc(var(--spacing) * 40); }
.max-h-48 { max-height: calc(var(--spacing) * 48); }
.max-h-56 { max-height: calc(var(--spacing) * 56); }
.max-h-64 { max-height: calc(var(--spacing) * 64); }

/*  Display Utilities */
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.hidden { display: none; }