/* Home Page Specific Styles - Rewritten to Standard CSS for CDN compatibility */
.skill-badge {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 11px;
  border: 1px solid transparent;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.skill-badge:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Categorical Skill Colors - Light Mode Default */
.skill-blue { background-color: #e0f2fe; color: #075985; border-color: #bae6fd; }
.skill-green { background-color: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.skill-red { background-color: #ffe4e6; color: #9f1239; border-color: #fecdd3; }
.skill-yellow { background-color: #fef3c7; color: #92400e; border-color: #fde68a; }
.skill-grey { background-color: #e2e8f0; color: #1e293b; border-color: #cbd5e1; }
.skill-purple { background-color: #f3e8ff; color: #6b21a8; border-color: #e9d5ff; }
.skill-indigo { background-color: #e0e7ff; color: #3730a3; border-color: #c7d2fe; }

/* Dark Mode Overrides */
.dark .skill-blue { background-color: rgba(12, 74, 110, 0.4); color: #bae6fd; border-color: rgba(12, 74, 110, 0.5); }
.dark .skill-green { background-color: rgba(6, 78, 59, 0.4); color: #a7f3d0; border-color: rgba(6, 78, 59, 0.5); }
.dark .skill-red { background-color: rgba(136, 19, 55, 0.4); color: #fecdd3; border-color: rgba(136, 19, 55, 0.5); }
.dark .skill-yellow { background-color: rgba(120, 53, 15, 0.4); color: #fde68a; border-color: rgba(120, 53, 15, 0.5); }
.dark .skill-grey { background-color: rgba(51, 65, 85, 0.5); color: #e2e8f0; border-color: rgba(71, 85, 105, 0.5); }
.dark .skill-purple { background-color: rgba(88, 28, 135, 0.4); color: #e9d5ff; border-color: rgba(88, 28, 135, 0.5); }
.dark .skill-indigo { background-color: rgba(49, 46, 129, 0.4); color: #c7d2fe; border-color: rgba(49, 46, 129, 0.5); }