/**
 * Kuball Design System — Premium black & gold sportsbook palette
 * Load before site-nav.css / investment-app.css
 */
:root {
    /* Core palette */
    --gold: #D6A329;
    --gold-light: #FFD96A;
    --gold-dark: #8E6514;
    --gold-gradient: linear-gradient(135deg, #F5C542 0%, #F5C542 100%);
    --gold-gradient-hover: linear-gradient(135deg, #EAB52C 0%, #EAB52C 100%);
    --gold-soft: rgba(214, 163, 41, 0.14);
    --gold-softer: rgba(214, 163, 41, 0.08);
    --gold-border: rgba(192, 138, 32, 0.28);
    --gold-shadow: 0 8px 24px rgba(17, 17, 17, 0.08), 0 4px 14px rgba(214, 163, 41, 0.16);
    --gold-shadow-sm: 0 4px 14px rgba(17, 17, 17, 0.05), 0 2px 8px rgba(214, 163, 41, 0.12);

    --dark: #111111;
    --dark-card: #1A1A1A;
    --bg: #0f1115;
    --border: rgba(214, 163, 41, 0.18);
    --text: #1B1B1B;
    --text-secondary: #5B5B5B;

    /* Semantic aliases (used across app CSS) */
    --accent: var(--gold);
    --accent-light: var(--gold-light);
    --accent-gradient: var(--gold-gradient);
    --accent-soft: var(--gold-soft);
    --ui-bg: var(--bg);
    --ui-card: linear-gradient(180deg, #FFFDF9 0%, #F8F6F1 100%);
    --ui-text: var(--text);
    --ui-muted: var(--text-secondary);
    --ui-border: var(--border);

    --surface: linear-gradient(180deg, #FFFDF9 0%, #F8F6F1 100%);
    --surface-muted: #F4EEDC;
    --shadow-card: 0 12px 30px rgba(0, 0, 0, 0.15);
    --shadow-card-hover: 0 16px 36px rgba(0, 0, 0, 0.18);
    --radius-card: 24px;
    --radius-pill: 999px;

    /* Nav tokens */
    --nav-text: var(--text);
    --nav-muted: var(--text-secondary);
    --nav-border: var(--border);
    --nav-accent: var(--gold);
    --nav-accent-soft: var(--gold-soft);
    --nav-accent-ink: var(--dark);
    --nav-shadow: 0 4px 20px rgba(17, 17, 17, 0.06);
    --nav-shadow-soft: 0 8px 28px rgba(17, 17, 17, 0.08);
}

/* ── Global base ── */
body {
    background: var(--bg);
    color: var(--text);
}

a.kuball-link,
.link-gold {
    color: var(--gold);
    text-decoration: none;
    transition: color 0.2s ease;
}

a.kuball-link:hover,
.link-gold:hover {
    color: var(--gold-light);
}

/* ── Explicit primary actions only; generic buttons keep component styling. ── */
a.btn,
.btn,
.btn-primary,
.btn-kuball-primary,
.kuball-btn-primary,
.btn-chip-primary,
.btn-submit,
.promo-modal__cta,
.bet-button,
.support-chat-send,
.contact-toggle-btn,
.profile-btn-gold,
input[type="submit"] {
    position: relative;
    overflow: hidden;
    background: var(--gold-gradient) !important;
    color: var(--dark) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: var(--radius-pill) !important;
    font-weight: 700 !important;
    box-shadow: 0 10px 24px rgba(214, 163, 41, 0.26) !important;
    text-shadow: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease !important;
}

a.btn::after,
.btn::after,
.btn-primary::after,
.btn-kuball-primary::after,
.kuball-btn-primary::after,
.btn-chip-primary::after,
.btn-submit::after,
.promo-modal__cta::after,
.bet-button::after,
.support-chat-send::after,
.contact-toggle-btn::after,
.profile-btn-gold::after,
input[type="submit"]::after {
    content: none;
}

a.btn:hover,
.btn:hover,
.btn-primary:hover,
.btn-kuball-primary:hover,
.kuball-btn-primary:hover,
.btn-chip-primary:hover,
.btn-submit:hover,
.promo-modal__cta:hover,
.bet-button:hover,
.support-chat-send:hover,
.contact-toggle-btn:hover,
.profile-btn-gold:hover,
input[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 30px rgba(214, 163, 41, 0.34) !important;
    filter: brightness(1.08) !important;
}

a.btn:hover::after,
.btn:hover::after,
.btn-primary:hover::after,
.btn-kuball-primary:hover::after,
.kuball-btn-primary:hover::after,
.btn-chip-primary:hover::after,
.btn-submit:hover::after,
.promo-modal__cta:hover::after,
.bet-button:hover::after,
.support-chat-send:hover::after,
.contact-toggle-btn:hover::after,
.profile-btn-gold:hover::after,
input[type="submit"]:hover::after {
    opacity: 0.32;
}

/* ── Active tab / pill ── */
.kuball-tab-active,
.is-active-gold {
    background: var(--gold-gradient) !important;
    color: var(--dark) !important;
    border-color: transparent !important;
    box-shadow: var(--gold-shadow-sm) !important;
}

/* ── Cards ── */
.kuball-card {
    background: var(--ui-card);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    color: var(--ui-text);
}

/* Keep result colors semantic; reserve gold for the Kuball accent. */
.text-positive {
    color: #16a34a !important;
}

.text-accent {
    color: var(--gold-dark) !important;
}

.text-emerald-400,
.text-green-400 {
    color: #34d399 !important;
}

.bg-emerald-500 {
    background: #10b981 !important;
    color: #fff !important;
}

.bg-green-500 {
    background: #16a34a !important;
    color: #fff !important;
}

.bg-blue-600 {
    background: #2563eb !important;
    color: #fff !important;
}

.hover\:bg-emerald-400:hover {
    background: #34d399 !important;
    color: #052e2b !important;
}

.hover\:bg-green-500:hover {
    background: #22c55e !important;
    color: #052e16 !important;
}

.bg-yellow-600,
.hover\:bg-yellow-500:hover {
    background: var(--gold-gradient) !important;
    color: var(--dark) !important;
}

.text-yellow-400,
.text-yellow-500 {
    color: var(--gold) !important;
}