/* define global colors */
:root {
  --color-purple-1: #f1ebfb;
  --color-purple-2: #d4c1f3;
  --color-purple-3: #b898eb;
  --color-purple-4: #9b6ee3;
  --color-purple-5: #8d50d8;
  --color-purple-6: #7337bd;
  --color-purple-7: #5b2c96;
  --color-purple-8: #43216f;
  --color-purple-9: #2c1548;
  --color-purple-10: #140a21;

  --color-green-1: #f1f7f0;
  --color-green-2: #d4e6d1;
  --color-green-3: #b7d6b2;
  --color-green-4: #9ac593;
  --color-green-5: #80bd77;
  --color-green-6: #669e5d;
  --color-green-7: #4d7c46;
  --color-green-8: #365931;
  --color-green-9: #20351d;
  --color-green-10: #0a1109;

  --color-orange-1: #fff1e5;
  --color-orange-2: #ffd4b3;
  --color-orange-3: #ffb880;
  --color-orange-4: #ff9e49;
  --color-orange-5: #ff811a;
  --color-orange-6: #e66b00;
  --color-orange-7: #b35300;
  --color-orange-8: #803b00;
  --color-orange-9: #4d2300;
  --color-orange-10: #291300;

  --color-blue-1: #ebf2fe;
  --color-blue-2: #c3d9fd;
  --color-blue-3: #9bc1fc;
  --color-blue-4: #74a8fb;
  --color-blue-5: #3b82f6;
  --color-blue-6: #0b61ee;
  --color-blue-7: #0849b2;
  --color-blue-8: #063177;
  --color-blue-9: #041a3f;
  --color-blue-10: #020d20;

  --color-yellow-1: #ffffeb;
  --color-yellow-2: #ffffb3;
  --color-yellow-3: #ffff80;
  --color-yellow-4: #ffff4d;
  --color-yellow-5: #ffff00;
  --color-yellow-6: #cccc00;
  --color-yellow-7: #999900;
  --color-yellow-8: #666600;
  --color-yellow-9: #333300;
  --color-yellow-10: #1a1a00;

  --color-pink-1: #ffebff;
  --color-pink-2: #ffb3ff;
  --color-pink-3: #ff80ff;
  --color-pink-4: #ff4dff;
  --color-pink-5: #ff00ff;
  --color-pink-6: #cc00cc;
  --color-pink-7: #990099;
  --color-pink-8: #660066;
  --color-pink-9: #330033;
  --color-pink-10: #1a001a;

  --color-cyan-1: #ebffff;
  --color-cyan-2: #b3ffff;
  --color-cyan-3: #80ffff;
  --color-cyan-4: #4dffff;
  --color-cyan-5: #00ffff;
  --color-cyan-6: #00cccc;
  --color-cyan-7: #009999;
  --color-cyan-8: #006666;
  --color-cyan-9: #003333;
  --color-cyan-10: #001a1a;

  --color-gray-1: #fbfbfb;
  --color-gray-2: #f0f0f0;
  --color-gray-3: #e0e0e0;
  --color-gray-4: #d0d0d0;
  --color-gray-5: #c0c0c0;
  --color-gray-6: #a0a0a0;
  --color-gray-7: #808080;
  --color-gray-8: #606060;
  --color-gray-9: #404040;
  --color-gray-10: #202020;

  --color-red-1: #fff1f1;
  --color-red-2: #ffe1e1;
  --color-red-3: #ffc1c1;
  --color-red-4: #ff9c9c;
  --color-red-5: #ff5c5c;
  --color-red-6: #e64141;
  --color-red-7: #b33333;
  --color-red-8: #802424;
  --color-red-9: #4d1616;
  --color-red-10: #290c0c;

  --color-gold-1: #fffbf0;
  --color-gold-2: #fef0c7;
  --color-gold-3: #fedf89;
  --color-gold-4: #fec84b;
  --color-gold-5: #fdb022;
  --color-gold-6: #f79009;
  --color-gold-7: #dc6803;
  --color-gold-8: #b54708;
  --color-gold-9: #93370d;
  --color-gold-10: #7a2e0e;
}

/* Background Color Utilities */
.bg-purple-1 {
  background-color: var(--color-purple-1);
}

.bg-purple-2 {
  background-color: var(--color-purple-2);
}

.bg-purple-3 {
  background-color: var(--color-purple-3);
}

.bg-purple-4 {
  background-color: var(--color-purple-4);
}

.bg-purple-5 {
  background-color: var(--color-purple-5);
}

.bg-purple-6 {
  background-color: var(--color-purple-6);
}

.bg-purple-7 {
  background-color: var(--color-purple-7);
}

.bg-purple-8 {
  background-color: var(--color-purple-8);
}

.bg-purple-9 {
  background-color: var(--color-purple-9);
}

.bg-purple-10 {
  background-color: var(--color-purple-10);
}

.bg-green-1 {
  background-color: var(--color-green-1);
}

.bg-green-2 {
  background-color: var(--color-green-2);
}

.bg-green-3 {
  background-color: var(--color-green-3);
}

.bg-green-4 {
  background-color: var(--color-green-4);
}

.bg-green-5 {
  background-color: var(--color-green-5);
}

.bg-green-6 {
  background-color: var(--color-green-6);
}

.bg-green-7 {
  background-color: var(--color-green-7);
}

.bg-green-8 {
  background-color: var(--color-green-8);
}

.bg-green-9 {
  background-color: var(--color-green-9);
}

.bg-green-10 {
  background-color: var(--color-green-10);
}

.bg-orange-1 {
  background-color: var(--color-orange-1);
}

.bg-orange-2 {
  background-color: var(--color-orange-2);
}

.bg-orange-3 {
  background-color: var(--color-orange-3);
}

.bg-orange-4 {
  background-color: var(--color-orange-4);
}

.bg-orange-5 {
  background-color: var(--color-orange-5);
}

.bg-orange-6 {
  background-color: var(--color-orange-6);
}

.bg-orange-7 {
  background-color: var(--color-orange-7);
}

.bg-orange-8 {
  background-color: var(--color-orange-8);
}

.bg-orange-9 {
  background-color: var(--color-orange-9);
}

.bg-orange-10 {
  background-color: var(--color-orange-10);
}

.bg-blue-1 {
  background-color: var(--color-blue-1);
}

.bg-blue-2 {
  background-color: var(--color-blue-2);
}

.bg-blue-3 {
  background-color: var(--color-blue-3);
}

.bg-blue-4 {
  background-color: var(--color-blue-4);
}

.bg-blue-5 {
  background-color: var(--color-blue-5);
}

.bg-blue-6 {
  background-color: var(--color-blue-6);
}

.bg-blue-7 {
  background-color: var(--color-blue-7);
}

.bg-blue-8 {
  background-color: var(--color-blue-8);
}

.bg-blue-9 {
  background-color: var(--color-blue-9);
}

.bg-blue-10 {
  background-color: var(--color-blue-10);
}

.bg-yellow-1 {
  background-color: var(--color-yellow-1);
}

.bg-yellow-2 {
  background-color: var(--color-yellow-2);
}

.bg-yellow-3 {
  background-color: var(--color-yellow-3);
}

.bg-yellow-4 {
  background-color: var(--color-yellow-4);
}

.bg-yellow-5 {
  background-color: var(--color-yellow-5);
}

.bg-yellow-6 {
  background-color: var(--color-yellow-6);
}

.bg-yellow-7 {
  background-color: var(--color-yellow-7);
}

.bg-yellow-8 {
  background-color: var(--color-yellow-8);
}

.bg-yellow-9 {
  background-color: var(--color-yellow-9);
}

.bg-yellow-10 {
  background-color: var(--color-yellow-10);
}

.bg-pink-1 {
  background-color: var(--color-pink-1);
}

.bg-pink-2 {
  background-color: var(--color-pink-2);
}

.bg-pink-3 {
  background-color: var(--color-pink-3);
}

.bg-pink-4 {
  background-color: var(--color-pink-4);
}

.bg-pink-5 {
  background-color: var(--color-pink-5);
}

.bg-pink-6 {
  background-color: var(--color-pink-6);
}

.bg-pink-7 {
  background-color: var(--color-pink-7);
}

.bg-pink-8 {
  background-color: var(--color-pink-8);
}

.bg-pink-9 {
  background-color: var(--color-pink-9);
}

.bg-pink-10 {
  background-color: var(--color-pink-10);
}

.bg-cyan-1 {
  background-color: var(--color-cyan-1);
}

.bg-cyan-2 {
  background-color: var(--color-cyan-2);
}

.bg-cyan-3 {
  background-color: var(--color-cyan-3);
}

.bg-cyan-4 {
  background-color: var(--color-cyan-4);
}

.bg-cyan-5 {
  background-color: var(--color-cyan-5);
}

.bg-cyan-6 {
  background-color: var(--color-cyan-6);
}

.bg-cyan-7 {
  background-color: var(--color-cyan-7);
}

.bg-cyan-8 {
  background-color: var(--color-cyan-8);
}

.bg-cyan-9 {
  background-color: var(--color-cyan-9);
}

.bg-cyan-10 {
  background-color: var(--color-cyan-10);
}

.bg-gray-1 {
  background-color: var(--color-gray-1);
}

.bg-gray-2 {
  background-color: var(--color-gray-2);
}

.bg-gray-3 {
  background-color: var(--color-gray-3);
}

.bg-gray-4 {
  background-color: var(--color-gray-4);
}

.bg-gray-5 {
  background-color: var(--color-gray-5);
}

.bg-gray-6 {
  background-color: var(--color-gray-6);
}

.bg-gray-7 {
  background-color: var(--color-gray-7);
}

.bg-gray-8 {
  background-color: var(--color-gray-8);
}

.bg-gray-9 {
  background-color: var(--color-gray-9);
}

.bg-gray-10 {
  background-color: var(--color-gray-10);
}

.bg-red-1 {
  background-color: var(--color-red-1);
}

.bg-red-2 {
  background-color: var(--color-red-2);
}

.bg-red-3 {
  background-color: var(--color-red-3);
}

.bg-red-4 {
  background-color: var(--color-red-4);
}

.bg-red-5 {
  background-color: var(--color-red-5);
}

.bg-red-6 {
  background-color: var(--color-red-6);
}

.bg-red-7 {
  background-color: var(--color-red-7);
}

.bg-red-8 {
  background-color: var(--color-red-8);
}

.bg-red-9 {
  background-color: var(--color-red-9);
}

.bg-red-10 {
  background-color: var(--color-red-10);
}

.bg-gold-1 {
  background-color: var(--color-gold-1);
}

.bg-gold-2 {
  background-color: var(--color-gold-2);
}

.bg-gold-3 {
  background-color: var(--color-gold-3);
}

.bg-gold-4 {
  background-color: var(--color-gold-4);
}

.bg-gold-5 {
  background-color: var(--color-gold-5);
}

.bg-gold-6 {
  background-color: var(--color-gold-6);
}

.bg-gold-7 {
  background-color: var(--color-gold-7);
}

.bg-gold-8 {
  background-color: var(--color-gold-8);
}

.bg-gold-9 {
  background-color: var(--color-gold-9);
}

.bg-gold-10 {
  background-color: var(--color-gold-10);
}

/* Text Color Utilities */
.text-purple-1 {
  color: var(--color-purple-1);
}

.text-purple-2 {
  color: var(--color-purple-2);
}

.text-purple-3 {
  color: var(--color-purple-3);
}

.text-purple-4 {
  color: var(--color-purple-4);
}

.text-purple-5 {
  color: var(--color-purple-5);
}

.text-purple-6 {
  color: var(--color-purple-6);
}

.text-purple-7 {
  color: var(--color-purple-7);
}

.text-purple-8 {
  color: var(--color-purple-8);
}

.text-purple-9 {
  color: var(--color-purple-9);
}

.text-purple-10 {
  color: var(--color-purple-10);
}

.text-green-1 {
  color: var(--color-green-1);
}

.text-green-2 {
  color: var(--color-green-2);
}

.text-green-3 {
  color: var(--color-green-3);
}

.text-green-4 {
  color: var(--color-green-4);
}

.text-green-5 {
  color: var(--color-green-5);
}

.text-green-6 {
  color: var(--color-green-6);
}

.text-green-7 {
  color: var(--color-green-7);
}

.text-green-8 {
  color: var(--color-green-8);
}

.text-green-9 {
  color: var(--color-green-9);
}

.text-green-10 {
  color: var(--color-green-10);
}

.text-orange-1 {
  color: var(--color-orange-1);
}

.text-orange-2 {
  color: var(--color-orange-2);
}

.text-orange-3 {
  color: var(--color-orange-3);
}

.text-orange-4 {
  color: var(--color-orange-4);
}

.text-orange-5 {
  color: var(--color-orange-5);
}

.text-orange-6 {
  color: var(--color-orange-6);
}

.text-orange-7 {
  color: var(--color-orange-7);
}

.text-orange-8 {
  color: var(--color-orange-8);
}

.text-orange-9 {
  color: var(--color-orange-9);
}

.text-orange-10 {
  color: var(--color-orange-10);
}

.text-blue-1 {
  color: var(--color-blue-1);
}

.text-blue-2 {
  color: var(--color-blue-2);
}

.text-blue-3 {
  color: var(--color-blue-3);
}

.text-blue-4 {
  color: var(--color-blue-4);
}

.text-blue-5 {
  color: var(--color-blue-5);
}

.text-blue-6 {
  color: var(--color-blue-6);
}

.text-blue-7 {
  color: var(--color-blue-7);
}

.text-blue-8 {
  color: var(--color-blue-8);
}

.text-blue-9 {
  color: var(--color-blue-9);
}

.text-blue-10 {
  color: var(--color-blue-10);
}

.text-yellow-1 {
  color: var(--color-yellow-1);
}

.text-yellow-2 {
  color: var(--color-yellow-2);
}

.text-yellow-3 {
  color: var(--color-yellow-3);
}

.text-yellow-4 {
  color: var(--color-yellow-4);
}

.text-yellow-5 {
  color: var(--color-yellow-5);
}

.text-yellow-6 {
  color: var(--color-yellow-6);
}

.text-yellow-7 {
  color: var(--color-yellow-7);
}

.text-yellow-8 {
  color: var(--color-yellow-8);
}

.text-yellow-9 {
  color: var(--color-yellow-9);
}

.text-yellow-10 {
  color: var(--color-yellow-10);
}

.text-pink-1 {
  color: var(--color-pink-1);
}

.text-pink-2 {
  color: var(--color-pink-2);
}

.text-pink-3 {
  color: var(--color-pink-3);
}

.text-pink-4 {
  color: var(--color-pink-4);
}

.text-pink-5 {
  color: var(--color-pink-5);
}

.text-pink-6 {
  color: var(--color-pink-6);
}

.text-pink-7 {
  color: var(--color-pink-7);
}

.text-pink-8 {
  color: var(--color-pink-8);
}

.text-pink-9 {
  color: var(--color-pink-9);
}

.text-pink-10 {
  color: var(--color-pink-10);
}

.text-cyan-1 {
  color: var(--color-cyan-1);
}

.text-cyan-2 {
  color: var(--color-cyan-2);
}

.text-cyan-3 {
  color: var(--color-cyan-3);
}

.text-cyan-4 {
  color: var(--color-cyan-4);
}

.text-cyan-5 {
  color: var(--color-cyan-5);
}

.text-cyan-6 {
  color: var(--color-cyan-6);
}

.text-cyan-7 {
  color: var(--color-cyan-7);
}

.text-cyan-8 {
  color: var(--color-cyan-8);
}

.text-cyan-9 {
  color: var(--color-cyan-9);
}

.text-cyan-10 {
  color: var(--color-cyan-10);
}

.text-gray-1 {
  color: var(--color-gray-1);
}

.text-gray-2 {
  color: var(--color-gray-2);
}

.text-gray-3 {
  color: var(--color-gray-3);
}

.text-gray-4 {
  color: var(--color-gray-4);
}

.text-gray-5 {
  color: var(--color-gray-5);
}

.text-gray-6 {
  color: var(--color-gray-6);
}

.text-gray-7 {
  color: var(--color-gray-7);
}

.text-gray-8 {
  color: var(--color-gray-8);
}

.text-gray-9 {
  color: var(--color-gray-9);
}

.text-gray-10 {
  color: var(--color-gray-10);
}

.text-red-1 {
  color: var(--color-red-1);
}

.text-red-2 {
  color: var(--color-red-2);
}

.text-red-3 {
  color: var(--color-red-3);
}

.text-red-4 {
  color: var(--color-red-4);
}

.text-red-5 {
  color: var(--color-red-5);
}

.text-red-6 {
  color: var(--color-red-6);
}

.text-red-7 {
  color: var(--color-red-7);
}

.text-red-8 {
  color: var(--color-red-8);
}

.text-red-9 {
  color: var(--color-red-9);
}

.text-red-10 {
  color: var(--color-red-10);
}

.text-gold-1 {
  color: var(--color-gold-1);
}

.text-gold-2 {
  color: var(--color-gold-2);
}

.text-gold-3 {
  color: var(--color-gold-3);
}

.text-gold-4 {
  color: var(--color-gold-4);
}

.text-gold-5 {
  color: var(--color-gold-5);
}

.text-gold-6 {
  color: var(--color-gold-6);
}

.text-gold-7 {
  color: var(--color-gold-7);
}

.text-gold-8 {
  color: var(--color-gold-8);
}

.text-gold-9 {
  color: var(--color-gold-9);
}

.text-gold-10 {
  color: var(--color-gold-10);
}

/* Shadow Utilities */
.shadow-sm {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.shadow-md {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.shadow-xl {
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.shadow-2xl {
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

.shadow-inner {
  box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
}

.shadow-none {
  box-shadow: 0 0 #0000;
}

/* Border Radius Utilities */
.rounded-sm {
  border-radius: 0.125rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-3xl {
  border-radius: 1.5rem;
}

.rounded-full {
  border-radius: 9999px;
}

/* Opacity Utilities */
.opacity-0 {
  opacity: 0;
}

.opacity-5 {
  opacity: 0.05;
}

.opacity-10 {
  opacity: 0.1;
}

.opacity-20 {
  opacity: 0.2;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-30 {
  opacity: 0.3;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-80 {
  opacity: 0.8;
}

.opacity-90 {
  opacity: 0.9;
}

.opacity-95 {
  opacity: 0.95;
}

.opacity-100 {
  opacity: 1;
}

/* Cursor Utilities */
.cursor-auto {
  cursor: auto;
}

.cursor-default {
  cursor: default;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-wait {
  cursor: wait;
}

.cursor-text {
  cursor: text;
}

.cursor-move {
  cursor: move;
}

.cursor-help {
  cursor: help;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-none {
  cursor: none;
}

/* Z-Index Utilities */
.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;
}

/* Pointer Events Utilities */
.pointer-events-none {
  pointer-events: none;
}

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

/* Object Fit Utilities */
.object-contain {
  object-fit: contain;
}

.object-cover {
  object-fit: cover;
}

.object-fill {
  object-fit: fill;
}

.object-none {
  object-fit: none;
}

.object-scale-down {
  object-fit: scale-down;
}

/* Accent Border Utilities */
.border-purple-accent {
  border-left: 4px solid var(--color-purple-5) !important;
}

.border-green-accent {
  border-left: 4px solid var(--color-green-5) !important;
}

.border-orange-accent {
  border-left: 4px solid var(--color-orange-5) !important;
}

.border-blue-accent {
  border-left: 4px solid var(--color-blue-5) !important;
}

.border-yellow-accent {
  border-left: 4px solid var(--color-yellow-5) !important;
}

.border-pink-accent {
  border-left: 4px solid var(--color-pink-5) !important;
}

.border-cyan-accent {
  border-left: 4px solid var(--color-cyan-5) !important;
}

.border-gray-accent {
  border-left: 4px solid var(--color-gray-5) !important;
}


/* Border Color Utilities */
.border-purple-1 {
  border-color: var(--color-purple-1);
}

.border-purple-2 {
  border-color: var(--color-purple-2);
}

.border-purple-3 {
  border-color: var(--color-purple-3);
}

.border-purple-4 {
  border-color: var(--color-purple-4);
}

.border-purple-5 {
  border-color: var(--color-purple-5);
}

.border-purple-6 {
  border-color: var(--color-purple-6);
}

.border-purple-7 {
  border-color: var(--color-purple-7);
}

.border-purple-8 {
  border-color: var(--color-purple-8);
}

.border-purple-9 {
  border-color: var(--color-purple-9);
}

.border-purple-10 {
  border-color: var(--color-purple-10);
}

.border-green-1 {
  border-color: var(--color-green-1);
}

.border-green-2 {
  border-color: var(--color-green-2);
}

.border-green-3 {
  border-color: var(--color-green-3);
}

.border-green-4 {
  border-color: var(--color-green-4);
}

.border-green-5 {
  border-color: var(--color-green-5);
}

.border-green-6 {
  border-color: var(--color-green-6);
}

.border-green-7 {
  border-color: var(--color-green-7);
}

.border-green-8 {
  border-color: var(--color-green-8);
}

.border-green-9 {
  border-color: var(--color-green-9);
}

.border-green-10 {
  border-color: var(--color-green-10);
}

.border-orange-1 {
  border-color: var(--color-orange-1);
}

.border-orange-2 {
  border-color: var(--color-orange-2);
}

.border-orange-3 {
  border-color: var(--color-orange-3);
}

.border-orange-4 {
  border-color: var(--color-orange-4);
}

.border-orange-5 {
  border-color: var(--color-orange-5);
}

.border-orange-6 {
  border-color: var(--color-orange-6);
}

.border-orange-7 {
  border-color: var(--color-orange-7);
}

.border-orange-8 {
  border-color: var(--color-orange-8);
}

.border-orange-9 {
  border-color: var(--color-orange-9);
}

.border-orange-10 {
  border-color: var(--color-orange-10);
}

.border-blue-1 {
  border-color: var(--color-blue-1);
}

.border-blue-2 {
  border-color: var(--color-blue-2);
}

.border-blue-3 {
  border-color: var(--color-blue-3);
}

.border-blue-4 {
  border-color: var(--color-blue-4);
}

.border-blue-5 {
  border-color: var(--color-blue-5);
}

.border-blue-6 {
  border-color: var(--color-blue-6);
}

.border-blue-7 {
  border-color: var(--color-blue-7);
}

.border-blue-8 {
  border-color: var(--color-blue-8);
}

.border-blue-9 {
  border-color: var(--color-blue-9);
}

.border-blue-10 {
  border-color: var(--color-blue-10);
}

.border-yellow-1 {
  border-color: var(--color-yellow-1);
}

.border-yellow-2 {
  border-color: var(--color-yellow-2);
}

.border-yellow-3 {
  border-color: var(--color-yellow-3);
}

.border-yellow-4 {
  border-color: var(--color-yellow-4);
}

.border-yellow-5 {
  border-color: var(--color-yellow-5);
}

.border-yellow-6 {
  border-color: var(--color-yellow-6);
}

.border-yellow-7 {
  border-color: var(--color-yellow-7);
}

.border-yellow-8 {
  border-color: var(--color-yellow-8);
}

.border-yellow-9 {
  border-color: var(--color-yellow-9);
}

.border-yellow-10 {
  border-color: var(--color-yellow-10);
}

.border-pink-1 {
  border-color: var(--color-pink-1);
}

.border-pink-2 {
  border-color: var(--color-pink-2);
}

.border-pink-3 {
  border-color: var(--color-pink-3);
}

.border-pink-4 {
  border-color: var(--color-pink-4);
}

.border-pink-5 {
  border-color: var(--color-pink-5);
}

.border-pink-6 {
  border-color: var(--color-pink-6);
}

.border-pink-7 {
  border-color: var(--color-pink-7);
}

.border-pink-8 {
  border-color: var(--color-pink-8);
}

.border-pink-9 {
  border-color: var(--color-pink-9);
}

.border-pink-10 {
  border-color: var(--color-pink-10);
}

.border-cyan-1 {
  border-color: var(--color-cyan-1);
}

.border-cyan-2 {
  border-color: var(--color-cyan-2);
}

.border-cyan-3 {
  border-color: var(--color-cyan-3);
}

.border-cyan-4 {
  border-color: var(--color-cyan-4);
}

.border-cyan-5 {
  border-color: var(--color-cyan-5);
}

.border-cyan-6 {
  border-color: var(--color-cyan-6);
}

.border-cyan-7 {
  border-color: var(--color-cyan-7);
}

.border-cyan-8 {
  border-color: var(--color-cyan-8);
}

.border-cyan-9 {
  border-color: var(--color-cyan-9);
}

.border-cyan-10 {
  border-color: var(--color-cyan-10);
}

.border-gray-1 {
  border-color: var(--color-gray-1);
}

.border-gray-2 {
  border-color: var(--color-gray-2);
}

.border-gray-3 {
  border-color: var(--color-gray-3);
}

.border-gray-4 {
  border-color: var(--color-gray-4);
}

.border-gray-5 {
  border-color: var(--color-gray-5);
}

.border-gray-6 {
  border-color: var(--color-gray-6);
}

.border-gray-7 {
  border-color: var(--color-gray-7);
}

.border-gray-8 {
  border-color: var(--color-gray-8);
}

.border-gray-9 {
  border-color: var(--color-gray-9);
}

.border-gray-10 {
  border-color: var(--color-gray-10);
}

.border-gold-1 {
  border-color: var(--color-gold-1);
}

.border-gold-2 {
  border-color: var(--color-gold-2);
}

.border-gold-3 {
  border-color: var(--color-gold-3);
}

.border-gold-4 {
  border-color: var(--color-gold-4);
}

.border-gold-5 {
  border-color: var(--color-gold-5);
}

.border-gold-6 {
  border-color: var(--color-gold-6);
}

.border-gold-7 {
  border-color: var(--color-gold-7);
}

.border-gold-8 {
  border-color: var(--color-gold-8);
}

.border-gold-9 {
  border-color: var(--color-gold-9);
}

.border-gold-10 {
  border-color: var(--color-gold-10);
}


/* Transitions & Animations */
.transition-none {
  transition-property: none;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Duration */
.duration-75 {
  transition-duration: 75ms;
}

.duration-100 {
  transition-duration: 100ms;
}

.duration-150 {
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.duration-500 {
  transition-duration: 500ms;
}

.duration-700 {
  transition-duration: 700ms;
}

.duration-1000 {
  transition-duration: 1000ms;
}

/* Timing Function */
.ease-linear {
  transition-timing-function: linear;
}

.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Interactive Hover Effects */
.transition-hover {
  transition: all 0.2s ease-in-out;
}

.transition-hover:hover {
  transform: translateX(2px);
}

.hover-lift {
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.hover-scale {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hover-scale:hover {
  transform: scale(1.05);
}

.hover-opacity:hover {
  opacity: 0.8;
}

/* Keyframe Animations */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes ping {

  75%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes bounce {

  0%,
  100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }

  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

.animate-bounce {
  animation: bounce 1s infinite;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.4s ease-out forwards;
}

/* Custom Badge Utilities */
.custom-badge {
  display: inline-block;
  padding: 0.35rem 0.65rem;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 50rem !important;
}

.badge-purple {
  background-color: var(--color-purple-1) !important;
  color: var(--color-purple-7) !important;
}

.badge-green {
  background-color: var(--color-green-1) !important;
  color: var(--color-green-7) !important;
}

.badge-orange {
  background-color: var(--color-orange-1) !important;
  color: var(--color-orange-7) !important;
}

.badge-blue {
  background-color: var(--color-blue-1) !important;
  color: var(--color-blue-7) !important;
}

.badge-yellow {
  background-color: var(--color-yellow-1) !important;
  color: var(--color-yellow-7) !important;
}

.badge-pink {
  background-color: var(--color-pink-1) !important;
  color: var(--color-pink-7) !important;
}

.badge-cyan {
  background-color: var(--color-cyan-1) !important;
  color: var(--color-cyan-7) !important;
}

.badge-gray {
  background-color: var(--color-gray-1) !important;
  color: var(--color-gray-7) !important;
}

.badge-red {
  background-color: var(--color-red-1) !important;
  color: var(--color-red-7) !important;
}

.badge-gold {
  background-color: var(--color-gold-1) !important;
  color: var(--color-gold-7) !important;
}