/**
 * JustVoteIt - USA Theme
 * Inspired by US flag colors: Deep Navy (#0B1F3A), Flag Red (#B22234), Flag Blue (#3C3B6E)
 */

:root[data-theme="usa"] {
    /* Core palette */
    --primary: #3C3B6E;           /* Flag blue */
    --primary-light: #4F4E87;
    --primary-dark: #0B1F3A;

    --secondary: #B22234;         /* Flag red */
    --secondary-light: #D54050;
    --secondary-dark: #7F101E;

    --accent: #F2C94C;            /* Gold accent */
    --accent-light: #F6D879;
    --accent-dark: #B98A1F;

    /* Backgrounds */
    --bg-main: #F6F8FB;
    --bg-card: #FFFFFF;
    --bg-alt: #EDF1F8;

    /* Text */
    --text-primary: #0B1F3A;
    --text-secondary: #3C3B6E;
    --text-muted: #667594;

    /* Borders */
    --border: #DCE3F1;
    --border-light: #E9EFFA;
    --border-accent: #B22234;

    /* Status colors */
    --success: #1FAA59;
    --error: #B22234;
    --warning: #F2C94C;
    --info: #3C3B6E;

    /* Gradients */
    --flag-gradient: linear-gradient(120deg, #0B1F3A 0%, #3C3B6E 55%, #B22234 100%);
    --header-bg: linear-gradient(110deg, rgba(11,31,58,0.95), rgba(60,59,110,0.9));
    --primary-gradient: linear-gradient(135deg, #3C3B6E 0%, #5860A6 100%);
    --accent-gradient: linear-gradient(135deg, #F2C94C 0%, #F29F05 100%);
    --card-gradient: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(244,246,251,0.95) 100%);

    /* Buttons */
    --btn-primary-bg: #3C3B6E;
    --btn-primary-text: #FFFFFF;
    --btn-secondary-bg: #B22234;
    --btn-secondary-text: #FFFFFF;
}

body[data-theme="usa"], :root[data-theme="usa"] body {
    background: radial-gradient(circle at top, rgba(11,31,58,0.9), rgba(11,31,58,0.4)), #0B1F3A;
    color: var(--text-primary);
}

[data-theme="usa"] .header {
    background: var(--header-bg);
    box-shadow: 0 20px 40px rgba(11,31,58,0.35);
}

[data-theme="usa"] .header a {
    color: #FFFFFF;
}

[data-theme="usa"] .footer {
    background: radial-gradient(circle at top, rgba(11,31,58,0.95), rgba(11,31,58,0.7));
}

[data-theme="usa"] .button-primary,
[data-theme="usa"] .btn-primary {
    background: var(--primary-gradient);
    color: #FFFFFF;
    border: none;
}

[data-theme="usa"] .button-secondary,
[data-theme="usa"] .btn-secondary {
    background: var(--secondary);
    color: #FFFFFF;
}

[data-theme="usa"] a {
    color: var(--secondary);
}

[data-theme="usa"] .card,
[data-theme="usa"] .debate-body-card,
[data-theme="usa"] .auth-card {
    background: var(--card-gradient);
    border: 1px solid rgba(60,59,110,0.08);
    box-shadow: 0 25px 60px rgba(11,31,58,0.12);
}

[data-theme="usa"] .notification-badge {
    background: var(--accent);
    color: var(--primary-dark);
}