/**
 * Kuball Design System — Premium black & gold sportsbook palette
 * Load before site-nav.css / investment-app.css
 */
:root {
    /* Core palette */
    --gold: #D4AF37;
    --gold-light: #F6E7A1;
    --gold-dark: #B8962E;
    --gold-gradient: linear-gradient(135deg, #D4AF37, #F6E7A1);
    --gold-gradient-hover: linear-gradient(135deg, #C9A227, #F0DC8A);
    --gold-soft: rgba(212, 175, 55, 0.12);
    --gold-softer: rgba(212, 175, 55, 0.06);
    --gold-border: rgba(212, 175, 55, 0.28);
    --gold-shadow: 0 8px 24px rgba(17, 17, 17, 0.08), 0 4px 14px rgba(212, 175, 55, 0.14);
    --gold-shadow-sm: 0 4px 14px rgba(17, 17, 17, 0.05), 0 2px 8px rgba(212, 175, 55, 0.1);

    --dark: #111111;
    --dark-card: #1A1A1A;
    --bg: #F8F8F8;
    --border: #ECECEC;
    --text: #202020;
    --text-secondary: #707070;

    /* 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: #ffffff;
    --ui-text: var(--text);
    --ui-muted: var(--text-secondary);
    --ui-border: var(--border);

    --surface: #ffffff;
    --surface-muted: #f3f3f3;
    --shadow-card: 0 4px 20px rgba(17, 17, 17, 0.05);
    --shadow-card-hover: 0 8px 28px rgba(17, 17, 17, 0.08);
    --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);
}

/* ── Primary button ── */
.btn-kuball-primary,
.kuball-btn-primary,
.btn-primary {
    background: var(--gold-gradient) !important;
    color: var(--dark) !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    font-weight: 700 !important;
    box-shadow: var(--gold-shadow-sm) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease !important;
}

.btn-kuball-primary:hover,
.kuball-btn-primary:hover,
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--gold-shadow) !important;
    filter: brightness(1.02);
}

/* ── 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(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

/* ── Positive / accent text (no green) ── */
.text-positive,
.text-accent {
    color: var(--gold-dark) !important;
}

/* Tailwind emerald/green overrides in betting UI */
.text-emerald-400,
.text-green-400 {
    color: var(--gold) !important;
}

.bg-emerald-500,
.bg-green-500,
.bg-blue-600 {
    background: var(--gold-gradient) !important;
    color: var(--dark) !important;
}

.hover\:bg-emerald-400:hover,
.hover\:bg-green-500:hover {
    filter: brightness(1.05);
}

.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;
}