:root {
    --primary-color: #0d6efd;
    --secondary-color: #6c757d;
    --success-color: #198754;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #0dcaf0;
    --accent-color: #2ecc40;
    --accent-dark: #27ae36;
    --accent-text: #1a7a29; /* darkened for WCAG AA on white (5.1:1 contrast) */
    --dark-bg: #1a1a2e;
    --navbar-bg: #ffffff;
    --btn-text: #ffffff;
    --cta-color: #D90429;
    --premium-color: #D4AF37;
    --light-bg-color: #F5F5F5;
}

/* ============================================
   Skip-to-content link (accessibility)
   ============================================ */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    padding: 12px 20px;
    background: var(--dark-bg);
    color: #fff;
    font-weight: 700;
    z-index: 99999;
    border-radius: 0 0 8px 0;
    text-decoration: none;
    transition: top 0.1s;
}
.skip-link:focus {
    top: 0;
}

/* ============================================
   Focus-visible: keyboard-only focus ring
   ============================================ */
:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
}
:focus:not(:focus-visible) {
    outline: none;
}

/* ============================================
   prefers-reduced-motion: disable transforms
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .st-how-card, .reel-card, .card {
        transition: none !important;
    }
    .st-how-card:hover, .reel-card:hover {
        transform: none !important;
    }
    .happy-marquee-track {
        animation: none !important;
    }
}

/* ============================================
   Bootstrap Primary → Theme Accent (Global)
   All btn-primary, bg-primary, text-primary
   across every page pick up the theme color.
   ============================================ */
.btn-primary {
    --bs-btn-bg: var(--accent-color);
    --bs-btn-border-color: var(--accent-color);
    --bs-btn-hover-bg: var(--accent-dark);
    --bs-btn-hover-border-color: var(--accent-dark);
    --bs-btn-active-bg: var(--accent-dark);
    --bs-btn-active-border-color: var(--accent-dark);
    --bs-btn-disabled-bg: var(--accent-color);
    --bs-btn-disabled-border-color: var(--accent-color);
    color: var(--btn-text) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    color: var(--btn-text) !important;
}
.btn-outline-primary {
    --bs-btn-color: var(--accent-color);
    --bs-btn-border-color: var(--accent-color);
    --bs-btn-hover-color: var(--btn-text);
    --bs-btn-hover-bg: var(--accent-color);
    --bs-btn-hover-border-color: var(--accent-color);
    --bs-btn-active-color: var(--btn-text);
    --bs-btn-active-bg: var(--accent-dark);
    --bs-btn-active-border-color: var(--accent-dark);
}
.bg-primary { background-color: var(--accent-color) !important; }
.text-primary { color: var(--accent-color) !important; }
.border-primary { border-color: var(--accent-color) !important; }
.link-primary { color: var(--accent-color) !important; }
.link-primary:hover { color: var(--accent-dark) !important; }
.badge.bg-primary { background-color: var(--accent-color) !important; }
.nav-pills .nav-link.active { background-color: var(--accent-color) !important; }
.page-item.active .page-link { background-color: var(--accent-color) !important; border-color: var(--accent-color) !important; }
.page-link { color: var(--accent-color) !important; }
.page-link:hover { color: var(--accent-dark) !important; }
.form-check-input:checked { background-color: var(--accent-color) !important; border-color: var(--accent-color) !important; }
.progress-bar { background-color: var(--accent-color) !important; }

/* ============================================
   Bootstrap Success → Theme Success (Global)
   Admin-editable Success/Green — status only.
   ============================================ */
.btn-success {
    --bs-btn-bg: var(--success-color);
    --bs-btn-border-color: var(--success-color);
    --bs-btn-disabled-bg: var(--success-color);
    --bs-btn-disabled-border-color: var(--success-color);
}
.btn-outline-success {
    --bs-btn-color: var(--success-color);
    --bs-btn-border-color: var(--success-color);
    --bs-btn-hover-bg: var(--success-color);
    --bs-btn-hover-border-color: var(--success-color);
}
.bg-success { background-color: var(--success-color) !important; }
.text-success { color: var(--success-color) !important; }
.border-success { border-color: var(--success-color) !important; }
.badge.bg-success { background-color: var(--success-color) !important; }

/* ============================================
   Bootstrap Light → Theme Light Background (Global)
   Admin-editable Light Gray — section/background fills.
   ============================================ */
.bg-light { background-color: var(--light-bg-color) !important; }

/* ============================================
   Premium / Gold accents — featured/special content
   only, not general-purpose buttons.
   ============================================ */
.btn-premium {
    background-color: var(--premium-color);
    color: #1a1a1a;
    border: none;
    font-weight: 600;
    padding: 10px 28px;
    border-radius: 4px;
}
.btn-premium:hover {
    filter: brightness(0.9);
    color: #1a1a1a;
}
.bg-premium { background-color: var(--premium-color) !important; }
.text-premium { color: var(--premium-color) !important; }
.border-premium { border-color: var(--premium-color) !important; }
.badge.bg-premium { background-color: var(--premium-color) !important; color: #1a1a1a; }

/* ============================================
   Conversion CTA / Red — a single standout action,
   distinct from the general Primary/Black button.
   ============================================ */
.btn-cta {
    background-color: var(--cta-color);
    color: var(--btn-text);
    border: none;
    font-weight: 600;
    padding: 10px 28px;
    border-radius: 4px;
}
.btn-cta:hover {
    background-color: var(--cta-dark, var(--accent-color));
    color: var(--btn-text);
}

/* ============================================
   Secondary / White — neutral action, inverts to
   Primary/Black on hover.
   ============================================ */
.btn-brand-secondary {
    background-color: #fff;
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
    font-weight: 600;
    padding: 10px 28px;
    border-radius: 4px;
}
.btn-brand-secondary:hover {
    background-color: var(--accent-color);
    color: var(--btn-text);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.navbar {
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
}