/**
 * Catch Me - Custom CSS
 * Only includes styles not covered by Tailwind CSS CDN
 * All standard utility classes are now handled by Tailwind CDN
 */

/* ==================== RESET / BASE ==================== */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ==================== CUSTOM RING COLORS ==================== */
/* Tailwind CDN needs these as CSS variables for ring utilities */
.ring-yellow-500\/30 { --tw-ring-color: rgba(234, 179, 8, 0.3); }
.ring-emerald-500\/30 { --tw-ring-color: rgba(16, 185, 129, 0.3); }
.ring-purple-500\/30 { --tw-ring-color: rgba(168, 85, 247, 0.3); }
.ring-purple-500\/50 { --tw-ring-color: rgba(168, 85, 247, 0.5); }
.ring-white\/50 { --tw-ring-color: rgba(255, 255, 255, 0.5); }
.ring-green-400 { --tw-ring-color: #4ade80; }
.ring-red-400 { --tw-ring-color: #f87171; }
.ring-blue-400 { --tw-ring-color: #60a5fa; }

/* ==================== CUSTOM SCROLLBAR ==================== */
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(107, 114, 128, 0.5) transparent;
}

/* Chrome, Safari, Edge */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(107, 114, 128, 0.5);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(107, 114, 128, 0.7);
}