/* style.css */

body {
    font-family: 'Inter', sans-serif;
    background-color: #1a1a1a; /* Dark background */
    color: #f0f0f0; /* Light text */
}
.text-dark-yellow {
    color: #FFD700; /* Dark Yellow */
}
.bg-dark-yellow {
    background-color: #FFD700; /* Dark Yellow */
}
.border-dark-yellow {
    border-color: #FFD700; /* Dark Yellow */
}
.btn-primary {
    /* Tailwind @apply directives are processed by Tailwind CSS,
       but for a standalone CSS file, these would be expanded.
       Since we're using the CDN, these are effectively comments
       and the classes are applied directly in HTML.
       If you were compiling Tailwind, you'd use @apply here. */
    /* @apply bg-dark-yellow text-gray-900 font-semibold py-3 px-6 rounded-lg shadow-md hover:bg-yellow-400 transition duration-300 ease-in-out; */
    background-color: #FFD700;
    color: #1a1a1a; /* Dark text for contrast */
    font-weight: 600; /* semibold */
    padding: 0.75rem 1.5rem; /* py-3 px-6 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* ease-in-out */
}
.btn-primary:hover {
    background-color: #FACC15; /* yellow-400 */
}

.input-field {
    /* Adjusted for transparency */
    /* @apply w-full p-3 rounded-lg bg-gray-800 bg-opacity-80 border border-gray-700 text-white focus:outline-none focus:border-dark-yellow; */
    width: 100%;
    padding: 0.75rem; /* p-3 */
    border-radius: 0.5rem; /* rounded-lg */
    background-color: rgba(31, 41, 55, 0.8); /* bg-gray-800 with 80% opacity */
    border: 1px solid #374151; /* border-gray-700 */
    color: #ffffff; /* text-white */
    outline: none; /* focus:outline-none */
}
.input-field:focus {
    border-color: #FFD700; /* focus:border-dark-yellow */
}

.card {
    /* Adjusted for transparency */
    /* @apply bg-gray-800 bg-opacity-90 p-6 rounded-xl shadow-lg border border-gray-700; */
    background-color: rgba(31, 41, 55, 0.9); /* bg-gray-800 with 90% opacity */
    padding: 1.5rem; /* p-6 */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    border: 1px solid #374151; /* border-gray-700 */
}