/* ==========================================================================
   🏁 MUNTRUME MOTORSPORT - MASTER DESIGN SYSTEM & THEME ENGINE
   Sleek Dark Racing Carbon & Crisp High-Contrast Light Mode
   ========================================================================== */

/* ===== CSS TOKENS & VARIABLES ===== */
:root,
[data-theme="light"],
html:not(.dark) {
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f1f5f9;
  --bg-card: #ffffff;
  --bg-card-hover: #f0fdf4;
  --bg-alt: #f0fdf4;
  
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-heading: #0f172a;
  
  --border-color: #e2e8f0;
  --border-subtle: #cbd5e1;
  --header-bg: rgba(255, 255, 255, 0.95);
  
  --accent-green: #16a34a;
  --accent-green-hover: #15803d;
  --accent-emerald: #10b981;
  --accent-glow: rgba(22, 163, 74, 0.15);
  
  --card-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
  --card-shadow-hover: 0 20px 30px -5px rgba(22, 163, 74, 0.12), 0 8px 10px -3px rgba(15, 23, 42, 0.04);
  
  --skeleton-from: #f1f5f9;
  --skeleton-via: #e2e8f0;
  --skeleton-to: #f1f5f9;
}

[data-theme="dark"],
.dark,
html.dark {
  --bg-primary: #090d16;
  --bg-secondary: #0f172a;
  --bg-tertiary: #1e293b;
  --bg-card: #111827;
  --bg-card-hover: #064e3b;
  --bg-alt: #0f172a;
  
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-heading: #ffffff;
  
  --border-color: #1e293b;
  --border-subtle: #334155;
  --header-bg: rgba(9, 13, 22, 0.95);
  
  --accent-green: #22c55e;
  --accent-green-hover: #16a34a;
  --accent-emerald: #10b981;
  --accent-glow: rgba(34, 197, 94, 0.22);
  
  --card-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.5);
  --card-shadow-hover: 0 20px 35px -5px rgba(34, 197, 94, 0.2), 0 10px 15px -3px rgba(0, 0, 0, 0.4);
  
  --skeleton-from: #0f172a;
  --skeleton-via: #1e293b;
  --skeleton-to: #0f172a;
}

/* ===== CORE BASE STYLES ===== */
html {
  scroll-behavior: smooth;
  color-scheme: light dark;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  transition: background-color 0.25s ease, color 0.25s ease;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Typography Hierarchy */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-heading);
  letter-spacing: -0.025em;
  font-weight: 800;
}

p {
  color: var(--text-secondary);
}

/* Navigation Header */
header {
  background-color: var(--header-bg) !important;
  border-bottom: 1px solid var(--border-color) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

header a:not(.bg-green-600):not(.bg-green-700) {
  color: var(--text-secondary);
  transition: color 0.2s ease;
}

header a:not(.bg-green-600):not(.bg-green-700):hover {
  color: var(--accent-green) !important;
}

/* ===== UNIVERSAL CARDS & CONTAINERS ===== */
.event-card,
.driver-card,
.stat-card,
.widget,
.telemetry-panel,
.chat-container,
.faq-item,
.contact-method,
.role-card,
.game-card,
.modal-content,
.setup-category {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--card-shadow);
  color: var(--text-primary);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.event-card:hover,
.driver-card:hover,
.stat-card:hover,
.contact-method:hover,
.role-card:hover,
.game-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--accent-green) !important;
}

/* Sections */
.section-alt {
  background-color: var(--bg-alt) !important;
}

/* Form Inputs */
input,
select,
textarea,
.form-input,
.search-input,
.chat-input {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0.75rem;
  padding: 0.875rem 1rem;
  outline: none;
  transition: all 0.2s ease;
}

input:focus,
select:focus,
textarea:focus,
.form-input:focus,
.search-input:focus,
.chat-input:focus {
  border-color: var(--accent-green) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

input::placeholder,
textarea::placeholder,
.form-input::placeholder,
.search-input::placeholder {
  color: var(--text-muted) !important;
}

/* Footer */
footer {
  background-color: var(--bg-secondary) !important;
  border-top: 4px solid var(--accent-green) !important;
  color: var(--text-primary) !important;
}

footer p {
  color: var(--text-secondary) !important;
}

/* ===== 🌙 DARK MODE OVERRIDES (Complete Spectrum) ===== */
[data-theme="dark"],
.dark,
html.dark {
  /* Background Utilities */
  .bg-white {
    background-color: #111827 !important;
  }
  
  .bg-gray-50,
  .bg-gray-100,
  .bg-slate-50,
  .bg-slate-100,
  .bg-green-50,
  .bg-\[\#f9fafb\] {
    background-color: #1e293b !important;
  }
  
  /* Hero Asymmetrical and gradient sections in dark mode */
  [class*="from-green-50"],
  [class*="via-white"],
  [class*="to-white"],
  .bg-gradient-to-br,
  .bg-gradient-to-b {
    background: linear-gradient(135deg, #090d16 0%, #0f172a 50%, #111827 100%) !important;
  }
  
  /* Headings & Prominent Text */
  h1, h2, h3, h4, h5, h6,
  .text-gray-900,
  .text-gray-800,
  .text-gray-950,
  .text-slate-900,
  .text-slate-800,
  .text-black {
    color: #ffffff !important;
  }
  
  /* Body & Subtitle Text */
  p,
  .text-gray-700,
  .text-gray-600,
  .text-slate-700,
  .text-slate-600 {
    color: #cbd5e1 !important;
  }
  
  /* Muted & Secondary Text */
  .text-gray-500,
  .text-gray-400,
  .text-slate-500,
  .text-slate-400 {
    color: #94a3b8 !important;
  }
  
  strong, b, th {
    color: #ffffff !important;
  }
  
  /* Borders */
  .border-gray-100,
  .border-gray-200,
  .border-gray-300,
  .border-slate-100,
  .border-slate-200,
  .border-green-200,
  .divide-gray-100 > *,
  .divide-gray-200 > * {
    border-color: #1e293b !important;
  }
  
  /* Tag Badges */
  .tag-badge-history,
  .tag-badge-team,
  .tag-badge-contact,
  .tag-badge-rss,
  .category-tag {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #22c55e !important;
    border-color: #22c55e !important;
  }
  
  .tag-badge-ai {
    background: #1e293b !important;
    color: #f8fafc !important;
  }
  
  /* Component-specific Dark overrides */
  .stat-mini {
    background-color: #1e293b !important;
    border-left-color: #22c55e !important;
  }
  
  .filter-btn {
    background-color: #111827 !important;
    color: #94a3b8 !important;
    border-color: #1e293b !important;
  }
  .filter-btn:hover {
    border-color: #22c55e !important;
    color: #22c55e !important;
  }
  .filter-btn.active {
    background-color: #22c55e !important;
    color: #ffffff !important;
    border-color: #22c55e !important;
  }
  
  .timeline-item {
    border-left-color: #22c55e !important;
  }
  .timeline-item::before {
    background: #22c55e !important;
    border-color: #111827 !important;
    box-shadow: 0 0 0 2px #22c55e !important;
  }
  
  .chat-messages {
    background-color: #090d16 !important;
  }
  .chat-message.bot .chat-bubble {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
  }
  .chat-input-area {
    background-color: #111827 !important;
    border-top-color: #1e293b !important;
  }
  .chat-input {
    background-color: #090d16 !important;
    color: #f8fafc !important;
    border-color: #1e293b !important;
  }
  .chat-avatar.user {
    background: #334155 !important;
    color: #ffffff !important;
  }
  
  .quick-question {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
  }
  .quick-question:hover {
    background-color: #064e3b !important;
    border-color: #22c55e !important;
    color: #22c55e !important;
  }
  
  .game-container {
    background: linear-gradient(135deg, #090d16 0%, #111827 100%) !important;
    border-color: #22c55e !important;
  }
  .ws-cell,
  .word-list-item,
  .trivia-option,
  .memory-front {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
  }
  
  .newspaper-header {
    border-bottom-color: #334155 !important;
  }
  .trending-title {
    color: #f8fafc !important;
  }
  
  /* Floating sidebar */
  .floating-sidebar > div {
    background-color: #111827 !important;
    border-color: #1e293b !important;
  }
  
  /* Theme toggle button */
  .theme-toggle-btn,
  .theme-toggle {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
  }
  .theme-toggle-btn:hover,
  .theme-toggle:hover {
    background-color: #22c55e !important;
    color: #ffffff !important;
    border-color: #22c55e !important;
  }
}

/* ===== ☀️ LIGHT MODE OVERRIDES (Complete Spectrum) ===== */
[data-theme="light"],
html:not(.dark) {
  /* Headings & Prominent Text */
  h1, h2, h3, h4, h5, h6,
  .text-gray-900,
  .text-gray-800,
  .text-gray-950,
  .text-slate-900,
  .text-slate-800,
  .text-black {
    color: #0f172a !important;
  }
  
  /* Body & Subtitle Text */
  p,
  .text-gray-700,
  .text-gray-600,
  .text-slate-700,
  .text-slate-600 {
    color: #334155 !important;
  }
  
  /* Muted & Secondary Text */
  .text-gray-500,
  .text-gray-400,
  .text-slate-500,
  .text-slate-400 {
    color: #64748b !important;
  }
  
  strong, b, th {
    color: #0f172a !important;
  }
  
  /* Prevent white text on light cards & containers */
  .event-card p,
  .event-card span:not([class*="bg-"]):not([class*="tag-badge"]),
  .driver-card p,
  .driver-card span:not([class*="bg-"]):not([class*="tag-badge"]):not([class*="license-"]),
  .stat-card div:not(.stat-number),
  .faq-item p,
  .contact-method p,
  .role-card p,
  .widget p,
  .trending-title {
    color: #334155 !important;
  }
  
  .event-card h3,
  .driver-card h3,
  .stat-card h3,
  .faq-item h3,
  .contact-method h3,
  .role-card h3,
  .widget-title {
    color: #0f172a !important;
  }
  
  /* Floating sidebar */
  .floating-sidebar > div {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
  }
  
  /* Theme toggle button */
  .theme-toggle-btn,
  .theme-toggle {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
  }
  .theme-toggle-btn:hover,
  .theme-toggle:hover {
    background-color: #16a34a !important;
    color: #ffffff !important;
    border-color: #16a34a !important;
  }
}

/* ===== 🛡️ EXPLICIT EXCLUSIONS (Never Override These Text Colors) ===== */
/* Buttons with colored backgrounds */
.bg-green-600,
.bg-green-700,
.bg-green-500,
.bg-emerald-600,
.btn-primary,
a.bg-green-600,
button.bg-green-600,
.chat-send-btn,
.chat-message.user .chat-bubble,
.tag-badge-live,
.tag-badge-game,
.tag-badge-sport,
.tag-badge-esports,
.tag-badge-endurance,
.tag-badge-breaking,
.tag-badge-yt,
.breaking-banner,
.filter-btn.active {
  color: #ffffff !important;
}

/* Hero Section with Video Overlay */
section.min-h-screen .text-white,
section.min-h-screen h1.text-white,
section.min-h-screen p.text-gray-200,
section.min-h-screen span.text-white,
#hero-status,
.telemetry-panel,
.telemetry-panel * {
  color: #ffffff !important;
}

.text-green-600 {
  color: #16a34a !important;
}

.text-green-500,
.text-green-400 {
  color: #22c55e !important;
}

.text-red-500,
.text-red-600 {
  color: #ef4444 !important;
}

/* ===== BUTTON & BADGE POLISH ===== */
.theme-toggle-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  border: 1px solid var(--border-color);
  background-color: var(--bg-card);
  color: var(--text-primary);
  flex-shrink: 0;
}

.theme-toggle-btn:hover {
  transform: rotate(15deg) scale(1.05);
}

.theme-toggle-btn svg {
  width: 20px;
  height: 20px;
}

/* Mobile Drawer */
#mobileDrawer {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(-100%);
  background-color: var(--bg-card);
  border-right: 1px solid var(--border-color);
}

#mobileDrawer.open {
  transform: translateX(0);
}

#mobileBackdrop {
  transition: opacity 0.3s ease, visibility 0.3s ease;
  opacity: 0;
  visibility: hidden;
}

#mobileBackdrop.open {
  opacity: 1;
  visibility: visible;
}

/* Floating Sidebar */
.floating-sidebar {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  transition: transform 0.3s ease;
}

.floating-sidebar.collapsed {
  transform: translateY(-50%) translateX(calc(100% - 2rem));
}