/* style.css */

/* Define Discord-like colors using CSS variables */
:root {
    --discord-blurple: #5865F2; /* Discord's primary brand color */
    --discord-dark-primary: #36393f; /* Dark background similar to Discord's main app */
    --discord-dark-secondary: #2f3136; /* Slightly lighter dark background for cards/containers */
    --discord-gray-text: #DCDDDE; /* Light gray for general text */
    --discord-light-gray: #B9BBBE; /* Lighter gray for less prominent text */
}

/* Apply Tailwind's @layer base to extend its configuration */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom Tailwind classes using CSS variables */
@layer utilities {
    .bg-discord-dark-primary {
        background-color: var(--discord-dark-primary);
    }
    .bg-discord-dark-secondary {
        background-color: var(--discord-dark-secondary);
    }
    .text-discord-blurple {
        color: var(--discord-blurple);
    }
    .text-gray-300 {
        color: var(--discord-gray-text);
    }
    .text-gray-400 {
        color: var(--discord-light-gray);
    }
}

/* Basic styling for links to ensure they match the theme */
a {
    color: var(--discord-blurple);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Optional: Scrollbar styling for a darker theme */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--discord-dark-primary);
}

::-webkit-scrollbar-thumb {
    background-color: var(--discord-blurple);
    border-radius: 6px;
    border: 3px solid var(--discord-dark-primary);
}