/*
 * This CSS file defines the color and font theme for the application.
 * It's designed to work alongside Tailwind CSS for a consistent look.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

/* Body Styles */
body {
    font-family: 'Inter', sans-serif !important;
}

/* Container Shadow */
.container-shadow {
    box-shadow: 0 4px 6px -1px rgba(128, 128, 128, 0.2) !important, 0 2px 4px -1px rgba(128, 128, 128, 0.1) !important;
}

/* Header and Card Backgrounds */
.bg-white {
    background-color: #ffffff !important;
}
.bg-gray-100 {
    background-color: #f5f5f5 !important;
}

/* Text Colors */
.text-gray-800 {
    color: #4d4d4d !important;
}
.text-gray-600 {
    color: #666666 !important;
}
.text-gray-500 {
    color: #808080 !important;
}
.text-gray-700 {
    color: #4d4d4d !important;
}

/* Links and Buttons (Gray Theme) */
.text-red-500 {
    color: #a0a0a0 !important;
}
.text-blue-600, a.hover\:underline {
    color: #a0a0a0 !important;
}
a.hover\:underline:hover {
    text-decoration: underline !important;
}
.text-red-600, .text-red-600:hover {
    color: #a0a0a0 !important;
}
.text-green-700 {
    color: #a0a0a0 !important;
}
.border-green-400 {
    border-color: #a0a0a0 !important;
}
.bg-green-100 {
    background-color: #eaeaea !important;
}

/* Button with bg-gray-800 class */
.bg-gray-800 {
    background-color: #4d4d4d !important;
    color: #ffffff !important; /* Set text color to white for contrast */
}
.bg-gray-800:hover {
    background-color: #333333 !important;
}