:root {
    --color-background: #0F172A;
    --color-surface: #1E293B;
    --color-surface-hover: #334155;
    --color-primary: #8B5CF6;
    --color-primary-hover: #7C3AED;
    --color-text: #F8FAFC;
    --color-text-muted: #94A3B8;
    --color-border: #334155;
    --color-accent: #A78BFA;
    --color-success: #22C55E;
    --color-error: #EF4444;
    --color-success-soft: rgba(34, 197, 94, 0.12);
    --color-error-soft: rgba(239, 68, 68, 0.12);
    --color-button-text: #FFFFFF;
    --color-progress-track: #334155;
}

/* Visible keyboard focus everywhere (accessibility). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}
.field-error { color: #FCA5A5; font-size: 0.875rem; margin-top: 0.375rem; }
input[aria-invalid="true"] { border-color: var(--color-error) !important; }
button[disabled] { opacity: 0.6; cursor: not-allowed; }

/* Keep account links and long signed-in names usable on narrow screens. */
@media (max-width: 640px) {
    nav[aria-label="Main"] > div {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    nav[aria-label="Main"] > div > div {
        flex-wrap: wrap;
        gap: 1rem;
    }
    #auth-nav {
        flex-wrap: wrap;
        min-width: 0;
        max-width: 100%;
    }
    #nav-username {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}