// *******************************************************************
// Borders
// *******************************************************************

$rounded-none: 0;
$rounded-sm:   0.125rem;
$rounded:      0.25rem;
$rounded-md:   0.375rem;
$rounded-lg:   0.5rem;
$rounded-xl:   0.75rem;
$rounded-2xl:  1rem;
$rounded-3xl:  1.5rem;
$rounded-full: 9999px;

$border-0: 0;
$border:   1px;
$border-2: 2px;
$border-4: 4px;
$border-8: 8px;

// *******************************************************************
// Breakpoints
// *******************************************************************

$breakpoint-sm:  640px;
$breakpoint-md:  768px;
$breakpoint-lg:  1024px;
$breakpoint-xl:  1280px;
$breakpoint-2xl: 1536px;

// *******************************************************************
// Colors
// *******************************************************************

$transparent: transparent;
$current: currentColor;

$black: #000;
$white: #fff;

$rose-50:  #fff1f2;
$rose-100: #ffe4e6;
$rose-200: #fecdd3;
$rose-300: #fda4af;
$rose-400: #fb7185;
$rose-500: #f43f5e;
$rose-600: #e11d48;
$rose-700: #be123c;
$rose-800: #9f1239;
$rose-900: #881337;

$pink-50:  #fdf2f8;
$pink-100: #fce7f3;
$pink-200: #fbcfe8;
$pink-300: #f9a8d4;
$pink-400: #f472b6;
$pink-500: #ec4899;
$pink-600: #db2777;
$pink-700: #be185d;
$pink-800: #9d174d;
$pink-900: #831843;

$fuchsia-50:  #fdf4ff;
$fuchsia-100: #fae8ff;
$fuchsia-200: #f5d0fe;
$fuchsia-300: #f0abfc;
$fuchsia-400: #e879f9;
$fuchsia-500: #d946ef;
$fuchsia-600: #c026d3;
$fuchsia-700: #a21caf;
$fuchsia-800: #86198f;
$fuchsia-900: #701a75;

$purple-50:  #faf5ff;
$purple-100: #f3e8ff;
$purple-200: #e9d5ff;
$purple-300: #d8b4fe;
$purple-400: #c084fc;
$purple-500: #a855f7;
$purple-600: #9333ea;
$purple-700: #7e22ce;
$purple-800: #6b21a8;
$purple-900: #581c87;

$violet-50:  #f5f3ff;
$violet-100: #ede9fe;
$violet-200: #ddd6fe;
$violet-300: #c4b5fd;
$violet-400: #a78bfa;
$violet-500: #8b5cf6;
$violet-600: #7c3aed;
$violet-700: #6d28d9;
$violet-800: #5b21b6;
$violet-900: #4c1d95;

$indigo-50:  #eef2ff;
$indigo-100: #e0e7ff;
$indigo-200: #c7d2fe;
$indigo-300: #a5b4fc;
$indigo-400: #818cf8;
$indigo-500: #6366f1;
$indigo-600: #4f46e5;
$indigo-700: #4338ca;
$indigo-800: #3730a3;
$indigo-900: #312e81;

$blue-50:  #eff6ff;
$blue-100: #dbeafe;
$blue-200: #bfdbfe;
$blue-300: #93c5fd;
$blue-400: #60a5fa;
$blue-500: #3b82f6;
$blue-600: #2563eb;
$blue-700: #1d4ed8;
$blue-800: #1e40af;
$blue-900: #1e3a8a;

$sky-50:  #f0f9ff;
$sky-100: #e0f2fe;
$sky-200: #bae6fd;
$sky-300: #7dd3fc;
$sky-400: #38bdf8;
$sky-500: #0ea5e9;
$sky-600: #0284c7;
$sky-700: #0369a1;
$sky-800: #075985;
$sky-900: #0c4a6e;

$cyan-50:  #ecfeff;
$cyan-100: #cffafe;
$cyan-200: #a5f3fc;
$cyan-300: #67e8f9;
$cyan-400: #22d3ee;
$cyan-500: #06b6d4;
$cyan-600: #0891b2;
$cyan-700: #0e7490;
$cyan-800: #155e75;
$cyan-900: #164e63;

$teal-50:  #f0fdfa;
$teal-100: #ccfbf1;
$teal-200: #99f6e4;
$teal-300: #5eead4;
$teal-400: #2dd4bf;
$teal-500: #14b8a6;
$teal-600: #0d9488;
$teal-700: #0f766e;
$teal-800: #115e59;
$teal-900: #134e4a;

$emerald-50:  #ecfdf5;
$emerald-100: #d1fae5;
$emerald-200: #a7f3d0;
$emerald-300: #6ee7b7;
$emerald-400: #34d399;
$emerald-500: #10b981;
$emerald-600: #059669;
$emerald-700: #047857;
$emerald-800: #065f46;
$emerald-900: #064e3b;

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

$lime-50:  #f7fee7;
$lime-100: #ecfccb;
$lime-200: #d9f99d;
$lime-300: #bef264;
$lime-400: #a3e635;
$lime-500: #84cc16;
$lime-600: #65a30d;
$lime-700: #4d7c0f;
$lime-800: #3f6212;
$lime-900: #365314;

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

$amber-50:  #fffbeb;
$amber-100: #fef3c7;
$amber-200: #fde68a;
$amber-300: #fcd34d;
$amber-400: #fbbf24;
$amber-500: #f59e0b;
$amber-600: #d97706;
$amber-700: #b45309;
$amber-800: #92400e;
$amber-900: #78350f;

$orange-50:  #fff7ed;
$orange-100: #ffedd5;
$orange-200: #fed7aa;
$orange-300: #fdba74;
$orange-400: #fb923c;
$orange-500: #f97316;
$orange-600: #ea580c;
$orange-700: #c2410c;
$orange-800: #9a3412;
$orange-900: #7c2d12;

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

$warm-gray-50:  #fafaf9;
$warm-gray-100: #f5f5f4;
$warm-gray-200: #e7e5e4;
$warm-gray-300: #d6d3d1;
$warm-gray-400: #a8a29e;
$warm-gray-500: #78716c;
$warm-gray-600: #57534e;
$warm-gray-700: #44403c;
$warm-gray-800: #292524;
$warm-gray-900: #1c1917;

$true-gray-50:  #fafafa;
$true-gray-100: #f5f5f5;
$true-gray-200: #e5e5e5;
$true-gray-300: #d4d4d4;
$true-gray-400: #a3a3a3;
$true-gray-500: #737373;
$true-gray-600: #525252;
$true-gray-700: #404040;
$true-gray-800: #262626;
$true-gray-900: #171717;

$gray-50:  #fafafa;
$gray-100: #f4f4f5;
$gray-200: #e4e4e7;
$gray-300: #d4d4d8;
$gray-400: #a1a1aa;
$gray-500: #71717a;
$gray-600: #52525b;
$gray-700: #3f3f46;
$gray-800: #27272a;
$gray-900: #18181b;

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

$blue-gray-50:  #f8fafc;
$blue-gray-100: #f1f5f9;
$blue-gray-200: #e2e8f0;
$blue-gray-300: #cbd5e1;
$blue-gray-400: #94a3b8;
$blue-gray-500: #64748b;
$blue-gray-600: #475569;
$blue-gray-700: #334155;
$blue-gray-800: #1e293b;
$blue-gray-900: #0f172a;

// *******************************************************************
// Effects
// *******************************************************************

$shadow-sm:    0 1px 2px 0 rgba(0, 0, 0, 0.05);
$shadow:       0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
$shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
$shadow-lg:    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
$shadow-xl:    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
$shadow-2xl:   0 25px 50px -12px rgba(0, 0, 0, 0.25);
$shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
$shadow-none:  none;

$opacity-0:   0;
$opacity-5:   0.05;
$opacity-10:  0.1;
$opacity-20:  0.2;
$opacity-25:  0.25;
$opacity-30:  0.3;
$opacity-40:  0.4;
$opacity-50:  0.5;
$opacity-60:  0.6;
$opacity-70:  0.7;
$opacity-75:  0.75;
$opacity-80:  0.8;
$opacity-90:  0.9;
$opacity-95:  0.95;
$opacity-100: 1;

// *******************************************************************
// Filters
// *******************************************************************

$blur-none: blur(0);
$blur-sm:   blur(4px);
$blur:      blur(8px);
$blur-md:   blur(12px);
$blur-lg:   blur(16px);
$blur-xl:   blur(24px);
$blur-2xl:  blur(40px);
$blur-3xl:  blur(64px);

$brightness-0:   brightness(0);
$brightness-50:  brightness(0.5);
$brightness-75:  brightness(0.75);
$brightness-90:  brightness(0.9);
$brightness-95:  brightness(0.95);
$brightness-100: brightness(1);
$brightness-105: brightness(1.05);
$brightness-110: brightness(1.1);
$brightness-125: brightness(1.25);
$brightness-150: brightness(1.5);
$brightness-200: brightness(2);

$contrast-0:   contrast(0);
$contrast-50:  contrast(0.5);
$contrast-75:  contrast(0.75);
$contrast-100: contrast(1);
$contrast-125: contrast(1.25);
$contrast-150: contrast(1.5);
$contrast-200: contrast(2);

$drop-shadow-none: drop-shadow(0 0 #0000);
$drop-shadow-sm:   drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
$drop-shadow:      drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
$drop-shadow-md:   drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
$drop-shadow-lg:   drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
$drop-shadow-xl:   drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));
$drop-shadow-2xl:  drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));

$grayscale-0: grayscale(0);
$grayscale:   grayscale(100%);

$hue-rotate-0:   hue-rotate(0deg);
$hue-rotate-15:  hue-rotate(15deg);
$hue-rotate-30:  hue-rotate(30deg);
$hue-rotate-60:  hue-rotate(60deg);
$hue-rotate-90:  hue-rotate(90deg);
$hue-rotate-180: hue-rotate(180deg);

$invert-0: invert(0);
$invert:   invert(100%);

$saturate-0:   saturate(0);
$saturate-50:  saturate(0.5);
$saturate-100: saturate(1);
$saturate-150: saturate(1.5);
$saturate-200: saturate(2);

$sepia-0: sepia(0);
$sepia:   sepia(100%);

// *******************************************************************
// Flex
// *******************************************************************

$flex-1:       1 1 0%;   // Allow grow and shrink, ignoring its initial size.
$flex-auto:    1 1 auto; // Allow grow and shrink, considering its initial size.
$flex-initial: 0 1 auto; // Allow shrink but not grow, considering its initial size.
$flex-none:    none;     // Prevent grow or shrink.

$flex-grow-0: 0;
$flex-grow:   1;

$flex-shrink-0: 0;
$flex-shrink:   1;

// *******************************************************************
// Grid
// *******************************************************************

$grid-cols-1:    repeat(1, minmax(0, 1fr));
$grid-cols-2:    repeat(2, minmax(0, 1fr));
$grid-cols-3:    repeat(3, minmax(0, 1fr));
$grid-cols-4:    repeat(4, minmax(0, 1fr));
$grid-cols-5:    repeat(5, minmax(0, 1fr));
$grid-cols-6:    repeat(6, minmax(0, 1fr));
$grid-cols-7:    repeat(7, minmax(0, 1fr));
$grid-cols-8:    repeat(8, minmax(0, 1fr));
$grid-cols-9:    repeat(9, minmax(0, 1fr));
$grid-cols-10:   repeat(10, minmax(0, 1fr));
$grid-cols-11:   repeat(11, minmax(0, 1fr));
$grid-cols-12:   repeat(12, minmax(0, 1fr));
$grid-cols-none: none;

$col-auto:      auto;
$col-span-1:    span 1 / span 1;
$col-span-2:    span 2 / span 2;
$col-span-3:    span 3 / span 3;
$col-span-4:    span 4 / span 4;
$col-span-5:    span 5 / span 5;
$col-span-6:    span 6 / span 6;
$col-span-7:    span 7 / span 7;
$col-span-8:    span 8 / span 8;
$col-span-9:    span 9 / span 9;
$col-span-10:   span 10 / span 10;
$col-span-11:   span 11 / span 11;
$col-span-12:   span 12 / span 12;
$col-span-full:	calc(1 / -1);

$grid-rows-1:    repeat(1, minmax(0, 1fr));
$grid-rows-2:    repeat(2, minmax(0, 1fr));
$grid-rows-3:    repeat(3, minmax(0, 1fr));
$grid-rows-4:    repeat(4, minmax(0, 1fr));
$grid-rows-5:    repeat(5, minmax(0, 1fr));
$grid-rows-6:    repeat(6, minmax(0, 1fr));
$grid-rows-none: none;

$row-auto:      auto;
$row-span-1:    span 1 / span 1;
$row-span-2:    span 2 / span 2;
$row-span-3:    span 3 / span 3;
$row-span-4:    span 4 / span 4;
$row-span-5:    span 5 / span 5;
$row-span-6:    span 6 / span 6;
$row-span-full: calc(1 / -1);

$auto-cols-auto: auto;
$auto-cols-min:  min-content;
$auto-cols-max:  max-content;
$auto-cols-fr:   minmax(0, 1fr);

$auto-rows-auto: auto;
$auto-rows-min:  min-content;
$auto-rows-max:  max-content;
$auto-rows-fr:   minmax(0, 1fr);

// *******************************************************************
// Height
// *******************************************************************

$h-auto:   auto;
$h-1-2:    50%;
$h-1-3:    33.333333%;
$h-2-3:    66.666667%;
$h-1-4:    25%;
$h-2-4:    50%;
$h-3-4:    75%;
$h-1-5:    20%;
$h-2-5:    40%;
$h-3-5:    60%;
$h-4-5:    80%;
$h-1-6:    16.666667%;
$h-2-6:    33.333333%;
$h-3-6:    50%;
$h-4-6:    66.666667%;
$h-5-6:    83.333333%;
$h-full:   100%;
$h-screen: 100vh;
$h-min:    min-content;
$h-max:    max-content;
$h-fit:    fit-content;

$min-h-0:      0px;
$min-h-full:   100%;
$min-h-screen: 100vh;
$min-h-min:    min-content;
$min-h-max:    max-content;
$min-h-fit:    fit-content;

$max-h-full:   100%;
$max-h-screen: 100vh;
$max-h-min:    min-content;
$max-h-max:    max-content;
$max-h-fit:    fit-content;

// *******************************************************************
// Sizing
// *******************************************************************

$size-px: 1px;
$size-0:  0;
$size-1:  0.25rem;
$size-2:  0.5rem;
$size-3:  0.75rem;
$size-4:  1rem;
$size-5:  1.25rem;
$size-6:  1.5rem;
$size-7:  1.75rem;
$size-8:  2rem;
$size-9:  2.25rem;
$size-10: 2.5rem;
$size-11: 2.75rem;
$size-12: 3rem;
$size-14: 3.5rem;
$size-16: 4rem;
$size-20: 5rem;
$size-24: 6rem;
$size-28: 7rem;
$size-32: 8rem;
$size-36: 9rem;
$size-40: 10rem;
$size-44: 11rem;
$size-48: 12rem;
$size-52: 13rem;
$size-56: 14rem;
$size-60: 15rem;
$size-64: 16rem;
$size-72: 18rem;
$size-80: 20rem;
$size-96: 24rem;

// *******************************************************************
// Transform
// *******************************************************************

$scale-0:   0;
$scale-50:  0.50;
$scale-75:  0.75;
$scale-90:  0.90;
$scale-95:  0.95;
$scale-100: 1;
$scale-105: 1.05;
$scale-110: 1.10;
$scale-125: 1.25;
$scale-150: 1.50;

$rotate-0:   0deg;
$rotate-1:   1deg;
$rotate-2:   2deg;
$rotate-3:   3deg;
$rotate-6:   6deg;
$rotate-12:  12deg;
$rotate-45:  45deg;
$rotate-90:  90deg;
$rotate-180: 180deg;

$translate-1-2:  50%;
$translate-1-3:  33.333333%;
$translate-2-3:  66.666667%;
$translate-1-4:  25%;
$translate-2-4:  50%;
$translate-3-4:  75%;
$translate-full: 100%;

$skew-0:  0deg;
$skew-1:  1deg;
$skew-2:  2deg;
$skew-3:  3deg;
$skew-6:  6deg;
$skew-12: 12deg;

// *******************************************************************
// Transition
// *******************************************************************

$transition-none:      none;
$transition-all:       all;
$transition:           background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
$transition-colors:    background-color, border-color, color, fill, stroke;
$transition-opacity:   opacity;
$transition-shadow:    box-shadow;
$transition-transform: transform;

$duration-75:   75ms;
$duration-100:  100ms;
$duration-150:  150ms;
$duration-200:  200ms;
$duration-300:  300ms;
$duration-500:  500ms;
$duration-700:  700ms;
$duration-1000: 1000ms;

$delay-75:   75ms;
$delay-100:  100ms;
$delay-150:  150ms;
$delay-200:  200ms;
$delay-300:  300ms;
$delay-500:  500ms;
$delay-700:  700ms;
$delay-1000: 1000ms;

$ease-linear: linear;
$ease-in:     cubic-bezier(0.4, 0, 1, 1);
$ease-out:    cubic-bezier(0, 0, 0.2, 1);
$ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

// *******************************************************************
// Typography
// *******************************************************************

$font-sans:  ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
$font-mono:  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

$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;
$text-8xl:  6rem;
$text-9xl:  8rem;

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

$leading-none:    1;
$leading-tight:   1.25;
$leading-snug:    1.375;
$leading-normal:  1.5;
$leading-relaxed: 1.625;
$leading-loose:   2;
$leading-3:       .75rem;
$leading-4:       1rem;
$leading-5:       1.25rem;
$leading-6:       1.5rem;
$leading-7:       1.75rem;
$leading-8:       2rem;
$leading-9:       2.25rem;
$leading-10:      2.5rem;

$tracking-tighter: -0.05em;
$tracking-tight:   -0.025em;
$tracking-normal:  0em;
$tracking-wide:    0.025em;
$tracking-wider:   0.05em;
$tracking-widest:  0.1em;

// *******************************************************************
// Width
// *******************************************************************

$w-auto:   auto;
$w-1-2:    50%;
$w-1-3:    33.333333%;
$w-2-3:    66.666667%;
$w-1-4:    25%;
$w-2-4:    50%;
$w-3-4:    75%;
$w-1-5:    20%;
$w-2-5:    40%;
$w-3-5:    60%;
$w-4-5:    80%;
$w-1-6:    16.666667%;
$w-2-6:    33.333333%;
$w-3-6:    50%;
$w-4-6:    66.666667%;
$w-5-6:    83.333333%;
$w-1-12:   8.333333%;
$w-2-12:   16.666667%;
$w-3-12:   25%;
$w-4-12:   33.333333%;
$w-5-12:   41.666667%;
$w-6-12:   50%;
$w-7-12:   58.333333%;
$w-8-12:   66.666667%;
$w-9-12:   75%;
$w-10-12:  83.333333%;
$w-11-12:  91.666667%;
$w-full:   100%;
$w-screen: 100vw;
$w-min:    min-content;
$w-max:    max-content;
$w-fit:    fit-content;

$min-w-0:    0px;
$min-w-full: 100%;
$min-w-min:  min-content;
$min-w-max:  max-content;
$min-w-fit:  fit-content;

$max-w-none: none;
$max-w-0:    0rem;
$max-w-xs:   20rem;
$max-w-sm:   24rem;
$max-w-md:   28rem;
$max-w-lg:   32rem;
$max-w-xl:   36rem;
$max-w-2xl:  42rem;
$max-w-3xl:  48rem;
$max-w-4xl:  56rem;
$max-w-5xl:  64rem;
$max-w-6xl:  72rem;
$max-w-7xl:  80rem;
$max-w-full: 100%;
$max-w-min:  min-content;
$max-w-max:  max-content;
$max-w-fit:  fit-content;

// *******************************************************************
// Zindex
// *******************************************************************

$z-auto: auto;
$z-0:    0;
$z-10:   10;
$z-20:   20;
$z-30:   30;
$z-40:   40;
$z-50:   50;

// *******************************************************************
// Mixins
// *******************************************************************

@mixin antialiased {}
@mixin subpixel-antialiased {}
@mixin ellipsis {}
@mixin outline-none {}
@mixin progress-bar {}
@mixin make-container($padding-x: $size-4) {}
@mixin gradient($direction, $from, $to: transparent, $via: null) {}