:root {
  color-scheme: light dark;
  --bg: #FFFFFF;
  --surface: #F6F7F9;
  --border: #E1E5EA;
  --text: #0B1220;
  --muted: #4B5565;
  --brand: #D92D20;
  --on-brand: #FFFFFF;
  --link: #1D4ED8;
  --good: #1D4ED8;
  --good-bg: #E8EEFC;
  --focus: #1D4ED8;

  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 10px;
  --radius-sm: 8px;
  --gutter: 24px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0E1117;
    --surface: #151A23;
    --border: #263041;
    --text: #E6EAF2;
    --muted: #9AA6B8;
    --brand: #D92D20;
    --on-brand: #FFFFFF;
    --link: #7AA2FF;
    --good: #7AA2FF;
    --good-bg: #1B2742;
    --focus: #7AA2FF;
  }
}

:root[data-theme="light"] { color-scheme: light; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E1117;
  --surface: #151A23;
  --border: #263041;
  --text: #E6EAF2;
  --muted: #9AA6B8;
  --brand: #D92D20;
  --on-brand: #FFFFFF;
  --link: #7AA2FF;
  --good: #7AA2FF;
  --good-bg: #1B2742;
  --focus: #7AA2FF;
}


/*
 * Chalk pages are Bootstrap pages with their own inline styles. This layer is loaded last and re-skins them
 * with the Predict Sports tokens above (same fonts, colors and light/dark switch as the Predict site and admin)
 * without touching page markup or scripts. It sets no layout, only color, type, borders and radius.
 */
html { background: var(--bg); }
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--font-body) !important;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .display-1, .display-2, .display-3, .display-4, .navbar-brand {
  font-family: var(--font-display) !important;
  color: var(--text);
  letter-spacing: -0.01em;
}
a { color: var(--link); }
.text-muted, .text-secondary, small, .small { color: var(--muted) !important; }
.text-white, .text-light { color: var(--text) !important; }
.text-primary { color: var(--link) !important; }
.text-success { color: var(--good) !important; }
.text-danger { color: var(--brand) !important; }

/* Header */
.navbar, .navbar.bg-dark, .navbar-dark.bg-dark, nav.navbar[style] {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border);
  box-shadow: none !important;
}
.navbar-brand, .navbar-brand:hover { color: var(--text) !important; font-weight: 700; }
.navbar-nav .nav-link, .navbar-dark .navbar-nav .nav-link, .navbar .nav-link { color: var(--text) !important; font-weight: 500; border-radius: var(--radius-sm); }
.navbar-nav .nav-link:hover, .navbar .nav-link:hover { color: var(--link) !important; background: var(--surface); }
.navbar-toggler { border-color: var(--border) !important; }
.navbar-toggler-icon { filter: invert(var(--icon-invert, 0)); }
:root[data-theme="dark"] { --icon-invert: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --icon-invert: 1; } }
.theme-toggle {
  min-height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: transparent; color: var(--text); font: inherit; font-size: 0.875rem; cursor: pointer; margin-left: 8px;
}
.theme-toggle:hover { background: var(--surface); }

/* Hero and gradient blocks */
[class*="hero"], .bg-primary, .bg-gradient, .bg-dark:not(.navbar), .bg-info, .model-badge {
  background: var(--surface) !important;
  color: var(--text) !important;
}
[class*="hero"] h1, [class*="hero"] h2, [class*="hero"] p, [class*="hero"] .lead { color: var(--text) !important; }
.bg-light, .bg-white { background: var(--surface) !important; color: var(--text) !important; }
section.bg-light { background: var(--surface) !important; }
footer, .footer { background: var(--surface) !important; color: var(--muted) !important; border-top: 1px solid var(--border); }
footer a, .footer a { color: var(--link) !important; }

/* Surfaces */
.card, .modal-content, .list-group-item, .dropdown-menu, .accordion-item, .offcanvas, .toast, .stat-card, .performance-card, .feature-card, .pricing-card {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}
.card-header, .card-footer, .modal-footer { background: transparent !important; color: var(--text) !important; border-color: var(--border) !important; }
.modal-header { background: var(--surface) !important; color: var(--text) !important; border-bottom: 1px solid var(--border) !important; }
.modal-header .btn-close { filter: none !important; }
:root[data-theme="dark"] .btn-close { filter: invert(1) !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-close { filter: invert(1) !important; } }
.border, .border-top, .border-bottom { border-color: var(--border) !important; }
hr { border-color: var(--border); opacity: 1; }

/* Buttons */
.btn { border-radius: var(--radius-sm) !important; font-weight: 600; }
.btn-primary, .btn-success, .btn-danger, .btn-warning {
  background: var(--brand) !important; border-color: var(--brand) !important; color: var(--on-brand) !important;
}
.btn-primary:hover, .btn-success:hover, .btn-danger:hover, .btn-warning:hover {
  background: color-mix(in srgb, var(--brand) 88%, #000) !important; border-color: color-mix(in srgb, var(--brand) 88%, #000) !important;
}
.btn-outline-primary, .btn-outline-secondary, .btn-outline-light, .btn-outline-dark, .btn-secondary, .btn-light, .btn-dark, .btn-info, .btn-link {
  background: transparent !important; border: 1px solid var(--border) !important; color: var(--text) !important;
}
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-light:hover, .btn-outline-dark:hover,
.btn-secondary:hover, .btn-light:hover, .btn-dark:hover, .btn-info:hover { background: var(--surface) !important; }
.btn:focus-visible, a:focus-visible, .form-control:focus, .form-select:focus { outline: 2px solid var(--focus) !important; outline-offset: 2px; box-shadow: none !important; }

/* Forms */
.form-control, .form-select, .input-group-text, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="date"], select, textarea {
  background: var(--bg) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important;
}
.form-label, label { color: var(--text); }
.form-text { color: var(--muted) !important; }

/* Tables */
.table, .table > :not(caption) > * > * { color: var(--text) !important; background: transparent !important; border-color: var(--border) !important; box-shadow: none !important; }
.table thead th, .table-dark, .table-dark th, .table > thead.table-dark > tr > th {
  background: var(--surface) !important; color: var(--muted) !important; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.table-striped > tbody > tr:nth-of-type(odd) > * { background: var(--surface) !important; }
.table-hover > tbody > tr:hover > * { background: color-mix(in srgb, var(--surface) 80%, var(--border)) !important; }
.user-row, .filter-bar { background: transparent !important; border-color: var(--border) !important; color: var(--text); }
.user-row:hover { background: var(--surface) !important; }
.filter-btn, .search-input { background: var(--bg) !important; color: var(--text) !important; border-color: var(--border) !important; }
.filter-btn.active { background: var(--brand) !important; color: var(--on-brand) !important; border-color: var(--brand) !important; }

/* Alerts and badges */
.alert { border-radius: var(--radius-sm) !important; border: 1px solid var(--border) !important; background: var(--surface) !important; color: var(--text) !important; }
.alert-success, .alert-info { border-left: 4px solid var(--good) !important; }
.alert-danger, .alert-warning { border-left: 4px solid var(--brand) !important; }
.badge, [class*="badge-"] { border-radius: 999px !important; font-weight: 600; }
.badge.bg-success, .badge.bg-primary, .badge.bg-info, .badge-active { background: var(--good-bg) !important; color: var(--good) !important; border: 1px solid var(--good); }
.badge.bg-danger, .badge.bg-warning, .badge-expired, .badge-removed { background: transparent !important; color: var(--brand) !important; border: 1px solid var(--brand); }
.badge.bg-secondary, .badge.bg-dark, .badge-lead, .badge-suspended, .badge-source { background: transparent !important; color: var(--muted) !important; border: 1px solid var(--border); }
.progress { background: var(--surface) !important; }
.progress-bar, .rate-fill { background: var(--good) !important; }

/* Stat numbers */
.stat-value, .stat-number, .display-6 { color: var(--text) !important; font-family: var(--font-display); font-variant-numeric: tabular-nums; }

/* Page-specific containers that carry their own white or gradient fills */
.addon-card, .admin-link-item, .checkout-card, .detail-box, .detail-item, .details-box, .drop-zone, .faq-card, .faq-section,
.file-item, .filters, .grade-card, .header, .info-box, .kentucky-derby-info, .legend, .login-box, .login-card, .manager-card,
.package-summary, .picks-info, .pipeline-step, .plan-card, .plan-summary, .plan-summary-box, .processing-info, .processing-step,
.promo-list, .race-card, .race-item, .races-included, .results-section, .sample-msg, .shared-section, .sms-notice, .stat-card,
.stats, .stats-summary, .success-card, .success-container, .tabs, .template-card, .track-card, .trial-warning, .trust-bar,
.upload-section, .checklist, .provider-card, .detail-item, .grafana-frame, .login-overlay .login-box {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}
.bet-info, .checkout-header, .promo-banner, .promo-btn, .stats-section, .role-header, .hero, .model-badge, .provider-header {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border);
}
.login-overlay { background: var(--bg) !important; }
h1, h2, h3, .header h1, [class*="title"] {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Text inside any of the above, unless it is a deliberately colored badge, status, link or button */
:is(p, li, td, th, label, h1, h2, h3, h4, h5, h6, strong, em, dt, dd, div, span):not([class*="badge"], [class*="status"], [class*="state"], [class*="tag"], [class*="pill"], [class*="dot"], [class*="alert"], [class*="error"], [class*="success"], [class*="warn"], [class*="loss"], [class*="win"], [class*="red"], [class*="green"], [class*="btn"], [class*="icon"], [class*="live"], [class*="price"], [class*="amount"], .fas, .fa, .far, .fab):not(.btn *, a *, button *, .navbar *, .alert *) {
  color: var(--text);
}
:is(small, .small, .text-muted, .muted, [class*="subtitle"], [class*="label"], [class*="meta"], [class*="desc"], .lead) { color: var(--muted) !important; }
.navbar .nav-link, .navbar-nav .nav-link { white-space: nowrap; }