:root {
    --club-primary: #005bbb;
    --club-primary-dark: #004494;
    --club-accent: #f2c100;
    --club-accent-dark: #d8aa00;
    --club-surface: #ffffff;
    --club-surface-soft: #eef3fb;
    --club-text: #0c1633;
    --club-muted: #4a587f;
    --club-border: #c9d7f1;
    --club-shadow: 0 18px 50px rgba(0, 62, 135, 0.16);
}

body {
    background: radial-gradient(circle at 90% 0%, rgba(0, 91, 187, 0.15) 0%, rgba(0, 91, 187, 0) 42%),
                radial-gradient(circle at 0% 100%, rgba(242, 193, 0, 0.18) 0%, rgba(242, 193, 0, 0) 45%),
                var(--club-surface-soft);
    color: var(--club-text);
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--club-primary);
    --bs-btn-border-color: var(--club-primary);
    --bs-btn-hover-bg: var(--club-primary-dark);
    --bs-btn-hover-border-color: var(--club-primary-dark);
    --bs-btn-active-bg: var(--club-primary-dark);
    --bs-btn-active-border-color: var(--club-primary-dark);
    --bs-btn-focus-shadow-rgb: 0, 91, 187;
}

.card-elevated {
    background: var(--club-surface);
    border: 1px solid var(--club-border);
    border-radius: 20px;
    box-shadow: var(--club-shadow);
}

.badge-role {
    background: rgba(242, 193, 0, 0.22);
    color: #6b4f00;
    border: 1px solid rgba(216, 170, 0, 0.5);
    border-radius: 999px;
    font-weight: 600;
    padding: 0.35rem 0.7rem;
}