/* Custom Tailwind Configuration */
:root {
    --barn-red: #780000;
    --venetian-red: #C1121F;
    --air-blue: #669BBC;
    --prussian-blue: #003049;
    --papaya-whip: #FDF0D5;
}

/* Tailwind CSS Custom Colors */
@layer config {
    .bg-barn-red-100 { background-color: rgba(120, 0, 0, 0.1); }
    .bg-barn-red-50 { background-color: rgba(120, 0, 0, 0.05); }
    .bg-venetian-red-50 { background-color: rgba(193, 18, 31, 0.05); }
    .bg-air-blue-50 { background-color: rgba(102, 155, 188, 0.05); }
    .bg-air-blue-100 { background-color: rgba(102, 155, 188, 0.1); }
    .bg-prussian-blue-50 { background-color: rgba(0, 48, 73, 0.05); }
    .bg-prussian-blue-100 { background-color: rgba(0, 48, 73, 0.1); }
    .bg-papaya-50 { background-color: #FDF0D5; }
}

/* Focus states for inputs */
input:focus {
    border-color: var(--air-blue) !important;
    box-shadow: 0 0 0 3px rgba(102, 155, 188, 0.1);
}

/* Smooth transitions */
* {
    transition: all 0.3s ease;
}

/* Patriotic star pattern background */
#bgPattern {
    background-image: 
        radial-gradient(circle, #C1121F 1px, transparent 1px),
        radial-gradient(circle, #003049 1px, transparent 1px);
    background-size: 50px 50px, 80px 80px;
    background-position: 0 0, 25px 25px;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    body {
        padding: 16px;
    }
}