/* US Theme Color Palette - Based on US.jpeg */
/* This file contains the color scheme inspired by US government themes */

:root {
    /* Primary Colors from US.jpeg */
    --us-sky-blue: #87CEEB;          /* Light blue background from image */
    --us-navy-blue: #1B365D;        /* Dark blue text from image */
    --us-gold: #DAA520;             /* Gold accents from passport */
    --us-white: #FFFFFF;            /* Pure white for clean elements */
    --us-flag-red: #DC143C;         /* Red from US flag */

    /* Extended Palette for Better UX */
    --us-sky-light: #B0E0E6;        /* Lighter sky blue for backgrounds */
    --us-navy-light: #2F4F8F;       /* Lighter navy for hover states */
    --us-gold-light: #F0E68C;       /* Lighter gold for highlights */
    --us-flag-red-light: #F08080;   /* Lighter red for hover states */

    /* Semantic Colors */
    --us-primary: var(--us-navy-blue);
    --us-secondary: var(--us-sky-blue);
    --us-accent: var(--us-gold);
    --us-danger: var(--us-flag-red);
    --us-success: #228B22;
    --us-warning: var(--us-gold);
    --us-info: var(--us-sky-blue);
}

/* Utility Classes for US Theme */
.bg-us-sky { background-color: var(--us-sky-blue); }
.bg-us-navy { background-color: var(--us-navy-blue); }
.bg-us-gold { background-color: var(--us-gold); }
.bg-us-flag-red { background-color: var(--us-flag-red); }
.bg-us-sky-light { background-color: var(--us-sky-light); }
.bg-us-navy-light { background-color: var(--us-navy-light); }
.bg-us-gold-light { background-color: var(--us-gold-light); }
.bg-us-flag-red-light { background-color: var(--us-flag-red-light); }

.text-us-sky { color: var(--us-sky-blue); }
.text-us-navy { color: var(--us-navy-blue); }
.text-us-gold { color: var(--us-gold); }
.text-us-flag-red { color: var(--us-flag-red); }
.text-us-navy-light { color: var(--us-navy-light); }

.border-us-sky { border-color: var(--us-sky-blue); }
.border-us-navy { border-color: var(--us-navy-blue); }
.border-us-gold { border-color: var(--us-gold); }
.border-us-flag-red { border-color: var(--us-flag-red); }

/* Focus States */
.focus\:ring-us-navy:focus {
    --tw-ring-color: var(--us-navy-blue);
    --tw-ring-opacity: 0.5;
}
.focus\:ring-us-sky:focus {
    --tw-ring-color: var(--us-sky-blue);
    --tw-ring-opacity: 0.5;
}
.focus\:ring-us-gold:focus {
    --tw-ring-color: var(--us-gold);
    --tw-ring-opacity: 0.5;
}

/* Hover States */
.hover\:bg-us-navy:hover { background-color: var(--us-navy-blue); }
.hover\:bg-us-sky:hover { background-color: var(--us-sky-blue); }
.hover\:bg-us-gold:hover { background-color: var(--us-gold); }
.hover\:text-us-navy:hover { color: var(--us-navy-blue); }
.hover\:text-us-sky:hover { color: var(--us-sky-blue); }
.hover\:text-us-gold:hover { color: var(--us-gold); }

/* Custom Gradients */
.gradient-us-primary {
    background: linear-gradient(135deg, var(--us-navy-blue) 0%, var(--us-navy-light) 100%);
}

.gradient-us-secondary {
    background: linear-gradient(135deg, var(--us-sky-blue) 0%, var(--us-sky-light) 100%);
}

.gradient-us-accent {
    background: linear-gradient(135deg, var(--us-gold) 0%, var(--us-gold-light) 100%);
}

/* Form Styling */
.us-form-input {
    border: 2px solid var(--us-sky-blue);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

.us-form-input:focus {
    outline: none;
    border-color: var(--us-gold);
    box-shadow: 0 0 0 3px rgba(218, 165, 32, 0.1);
}

.us-btn-primary {
    background-color: var(--us-navy-blue);
    color: var(--us-white);
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
}

.us-btn-primary:hover {
    background-color: var(--us-navy-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(27, 54, 93, 0.3);
}

.us-btn-accent {
    background-color: var(--us-gold);
    color: var(--us-navy-blue);
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
}

.us-btn-accent:hover {
    background-color: var(--us-gold-light);
    transform: scale(1.05);
}

/* Card Styling */
.us-card {
    background-color: var(--us-white);
    border: 2px solid var(--us-sky-blue);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(135, 206, 235, 0.1);
}

.us-card-featured {
    border-color: var(--us-gold);
    box-shadow: 0 8px 25px rgba(218, 165, 32, 0.2);
}