:root {
  --ct-bg: #000000;
  --ct-bg-secondary: #121212;
  --ct-header: #FFFFFF;
  --ct-header-text: #000000;
  --ct-navbar: #111111;
  --ct-navbar-text: #B8B8B8;
  --ct-navbar-active: #d4af37;
  --ct-card: #171717;
  --ct-card-hover: #202020;
  --ct-button: #d4af37;
  --ct-button-hover: #b8941f;
  --ct-button-text: #878787;
  --ct-text: #000000;
  --ct-text-secondary: #AB4949;
  --ct-link: #000000;
  --ct-link-hover: #f0cf62;
  --ct-icon: #AD5EAC;
  --ct-icon-active: #A85198;
  --ct-border: #303030;
  --ct-input: #101010;
  --ct-input-text: #f2f2f2;
  --ct-placeholder: #777777;
  --ct-dropdown: #181818;
  --ct-modal: #171717;
  --ct-footer: #0b0b0b;
  --ct-footer-text: #bdbdbd;
  --ct-success: #28a745;
  --ct-warning: #ffc107;
  --ct-danger: #dc3545;
  --ct-pending: #ff9800;
  --ct-accent-1: #d4af37;
  --ct-accent-2: #8a6a12;
  --ct-gradient-1: #d4af37;
  --ct-gradient-2: #8a6a12;

  /* compatibility with existing bright-premium variables */
  --header-color: var(--ct-header);
  --navbar-color: var(--ct-navbar);
  --primary-color: var(--ct-button);
  --secondary-color: var(--ct-accent-2);
  --header-text: var(--ct-header-text);
  --navbar-text: var(--ct-navbar-text);
  --primary-text: var(--ct-button-text);
  --secondary-text: var(--ct-text-secondary);
  --background-page: var(--ct-bg);
  --page-text: var(--ct-text);
  --background-theme: linear-gradient(135deg, var(--ct-gradient-1), var(--ct-gradient-2));
}

html, body { background-color: var(--ct-bg) !important; color: var(--ct-text) !important; }
body { color: var(--ct-text) !important; }
a { color: var(--ct-link); }
a:hover, a:focus { color: var(--ct-link-hover); }

.header, header.header, .top-header, .site-header { background: var(--ct-header) !important; color: var(--ct-header-text) !important; }
.navbar, .navbar-default, .navbar-dark, .main-navbar, .bottom-nav, .mobile-navbar { background: var(--ct-navbar) !important; color: var(--ct-navbar-text) !important; }
.navbar a, .navbar-nav > li > a { color: var(--ct-navbar-text) !important; }
.navbar a:hover, .navbar a:focus, .navbar .active > a, .navbar .active a { color: var(--ct-navbar-active) !important; }

.card, .game-card, .provider-card, .menu-card, .panel, .modal-content, .dropdown-menu { background-color: var(--ct-card) !important; color: var(--ct-text) !important; border-color: var(--ct-border) !important; }
.card:hover, .game-card:hover, .provider-card:hover, .menu-card:hover { background-color: var(--ct-card-hover) !important; }

button, .btn, input[type=submit], input[type=button] { background-color: var(--ct-button); color: var(--ct-button-text); border-color: var(--ct-button); }
button:hover, .btn:hover, input[type=submit]:hover, input[type=button]:hover { background-color: var(--ct-button-hover); color: var(--ct-button-text); border-color: var(--ct-button-hover); }

input, select, textarea, .form-control, .custom-select { background-color: var(--ct-input) !important; color: var(--ct-input-text) !important; border-color: var(--ct-border) !important; }
input::placeholder, textarea::placeholder, .form-control::placeholder { color: var(--ct-placeholder) !important; }
.dropdown-menu { background-color: var(--ct-dropdown) !important; }
.dropdown-item { color: var(--ct-text) !important; }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--ct-card-hover) !important; color: var(--ct-text) !important; }

.text-muted, .secondary-text, .text-secondary { color: var(--ct-text-secondary) !important; }
.border, .border-top, .border-bottom, .border-left, .border-right { border-color: var(--ct-border) !important; }
.modal-content { background-color: var(--ct-modal) !important; }
footer, .footer { background-color: var(--ct-footer) !important; color: var(--ct-footer-text) !important; }
.text-success, .alert-success { color: var(--ct-success) !important; }
.text-warning, .alert-warning { color: var(--ct-warning) !important; }
.text-danger, .alert-danger { color: var(--ct-danger) !important; }
.bg-success { background-color: var(--ct-success) !important; }
.bg-warning { background-color: var(--ct-warning) !important; }
.bg-danger { background-color: var(--ct-danger) !important; }

/* broad compatibility for common hard-coded theme classes */
.bg-primary, .btn-primary, .badge-primary { background-color: var(--ct-button) !important; border-color: var(--ct-button) !important; }
.text-primary { color: var(--ct-button) !important; }
.btn-success { background-color: var(--ct-success) !important; border-color: var(--ct-success) !important; }
.btn-warning { background-color: var(--ct-warning) !important; border-color: var(--ct-warning) !important; }
.btn-danger { background-color: var(--ct-danger) !important; border-color: var(--ct-danger) !important; }

/* preserve readable contrast for common icon/text containers */
[class*="icon"], .ti, .mdi, .fa { color: var(--ct-icon); }

@media (max-width: 767.98px) {
  .mobile-menu, .mobile-nav, .bottom-navbar, .fixed-bottom { background-color: var(--ct-navbar) !important; color: var(--ct-navbar-text) !important; }
  .mobile-menu a, .mobile-nav a, .bottom-navbar a { color: var(--ct-navbar-text) !important; }
  .mobile-menu a.active, .mobile-nav a.active, .bottom-navbar a.active { color: var(--ct-navbar-active) !important; }
}

/* V3: loaded again at the end of the page so page-specific legacy CSS cannot override the theme. */
body, .page-wrapper, .main-wrapper, .content-wrapper, .container-fluid { background-color: var(--ct-bg) !important; color: var(--ct-text) !important; }
.home-auth-fixed-v2 a, .home-promo-fixed-v2 .hpf-card, .home-footer-fixed-v2 { background: linear-gradient(145deg, var(--ct-card), var(--ct-bg-secondary)) !important; border-color: var(--ct-border) !important; color: var(--ct-text) !important; }
.home-auth-fixed-v2 .hcf-icon, .home-promo-fixed-v2 .hpf-badge { background: var(--ct-accent-1) !important; color: var(--ct-button-text) !important; }
.home-promo-fixed-v2 .hpf-line, .home-promo-fixed-v2 .hpf-card a, .home-footer-fixed-v2 .hff-logo { color: var(--ct-link) !important; background-color: var(--ct-link) !important; }
.home-promo-fixed-v2 .hpf-card strong, .home-promo-fixed-v2 .hpf-card p, .home-footer-fixed-v2 .hff-copy { color: var(--ct-text) !important; }
.home-auth-fixed-v2 .hcf-desc { color: var(--ct-text-secondary) !important; }
/* Common home sections/cards */
[class*="home-"] .card, [class*="home-"] .item, [class*="home-"] .box, [class*="home-"] .content-box { background-color: var(--ct-card) !important; color: var(--ct-text) !important; border-color: var(--ct-border) !important; }
[class*="home-"] .title, [class*="home-"] .name, [class*="home-"] .text, [class*="home-"] h1, [class*="home-"] h2, [class*="home-"] h3, [class*="home-"] h4, [class*="home-"] h5, [class*="home-"] h6 { color: var(--ct-text) !important; }
/* Legacy purple/blue utility elements */
.text-purple, .text-violet, .text-primary, [class*="purple"], [class*="violet"] { color: var(--ct-accent-1) !important; }
.btn-purple, .btn-violet, [class*="btn-purple"], [class*="btn-violet"] { background: linear-gradient(135deg,var(--ct-gradient-1),var(--ct-gradient-2)) !important; border-color: var(--ct-gradient-1) !important; color: var(--ct-button-text) !important; }
/* Navigation and common header containers */
.sidenav, .side-nav, .sidebar, .main-menu, .menu-sidebar { background-color: var(--ct-navbar) !important; color: var(--ct-navbar-text) !important; border-color: var(--ct-border) !important; }
.sidenav a, .side-nav a, .sidebar a, .main-menu a, .menu-sidebar a { color: var(--ct-navbar-text) !important; }
.sidenav a.active, .side-nav a.active, .sidebar a.active, .main-menu a.active, .menu-sidebar a.active { color: var(--ct-navbar-active) !important; }