/* =============================================
   GAME HUB — THEMES.CSS
   Dark (default) + Light mode
   ============================================= */

/* ---- DARK MODE (default) ---- */
[data-theme="dark"] {
  --bg:          #0a0e27;
  --bg-card:     #16213e;
  --bg-card2:    #0f1733;
  --bg-dark:     #070a1c;
  --text-main:   #ffffff;
  --text-dim:    #80d9ff;
  --border:      rgba(0, 212, 255, 0.18);
  --border-hover:rgba(0, 212, 255, 0.55);
}

/* ---- LIGHT MODE ---- */
[data-theme="light"] {
  --bg:          #eef4ff;
  --bg-card:     #ffffff;
  --bg-card2:    #f0f5ff;
  --bg-dark:     #dce8ff;
  --text-main:   #0a1428;
  --text-dim:    #2d6a9f;
  --border:      rgba(0, 100, 180, 0.18);
  --border-hover:rgba(0, 100, 180, 0.5);
  --cyan:        #0070c0;
  --magenta:     #d4004a;
  --purple:      #7b2fbe;
  --green:       #008c44;
  --glow-cyan:   0 0 8px rgba(0,112,192,0.3), 0 0 20px rgba(0,112,192,0.12);
  --glow-magenta:0 0 8px rgba(212,0,74,0.3), 0 0 20px rgba(212,0,74,0.12);
  --glow-green:  0 0 8px rgba(0,140,68,0.3), 0 0 20px rgba(0,140,68,0.12);
}

[data-theme="light"] body {
  color: var(--text-main);
  background: var(--bg);
}

[data-theme="light"] .header {
  background: rgba(238,244,255,0.92);
  border-color: var(--border);
}
[data-theme="light"] .header.scrolled {
  background: rgba(238,244,255,0.98);
}

[data-theme="light"] .hero {
  background: var(--bg);
}
[data-theme="light"] .hero-bg-grid {
  background-image:
    linear-gradient(rgba(0,112,192,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,112,192,0.06) 1px, transparent 1px);
}
[data-theme="light"] .hero-scanlines {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.025) 2px,
    rgba(0,0,0,0.025) 4px
  );
}

[data-theme="light"] .game-card {
  background: var(--bg-card);
  border-color: var(--border);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
[data-theme="light"] .game-card:hover {
  box-shadow: 0 0 20px rgba(0,112,192,0.15), 0 12px 30px rgba(0,0,0,0.1);
}

[data-theme="light"] .card-thumb {
  background: var(--bg-card2);
}
[data-theme="light"] .card-title {
  color: var(--text-main);
}
[data-theme="light"] .card-desc {
  color: var(--text-dim);
}
[data-theme="light"] .card-plays {
  color: var(--text-dim);
}
[data-theme="light"] .card-meta {
  color: rgba(0, 80, 160, 0.6);
}

/* Textes généraux qui utilisent --white hardcodé */
[data-theme="light"] body,
[data-theme="light"] .modal-game-title,
[data-theme="light"] .modal-game-desc,
[data-theme="light"] .modal-features-list li,
[data-theme="light"] .modal-controls p,
[data-theme="light"] .hero-sub,
[data-theme="light"] .about-bio,
[data-theme="light"] .skill-name,
[data-theme="light"] .pop-name,
[data-theme="light"] .section-title,
[data-theme="light"] .shortcuts-modal,
[data-theme="light"] .shortcut {
  color: var(--text-main);
}

[data-theme="light"] .hero-badge {
  color: var(--text-dim);
  background: rgba(0,112,192,0.05);
}
[data-theme="light"] .search-input {
  color: var(--text-main);
}
[data-theme="light"] .sort-select {
  color: var(--text-dim);
}
[data-theme="light"] .card-tag {
  color: rgba(0,80,160,0.8);
  border-color: rgba(0,100,180,0.25);
}

[data-theme="light"] .filter-btn {
  border-color: var(--border);
  color: var(--text-dim);
}
[data-theme="light"] .filter-btn:hover,
[data-theme="light"] .filter-btn.active {
  background: rgba(0,112,192,0.08);
  border-color: var(--cyan);
  color: var(--cyan);
}

[data-theme="light"] .search-box,
[data-theme="light"] .sort-select {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-dim);
}

[data-theme="light"] .section-dark {
  background: var(--bg-dark);
}

[data-theme="light"] .stat-card {
  background: var(--bg-card);
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

[data-theme="light"] .popularity-section {
  background: var(--bg-card);
}

[data-theme="light"] .modal {
  background: var(--bg-card);
}
[data-theme="light"] .modal-controls {
  background: var(--bg-card2);
}

[data-theme="light"] .footer {
  background: var(--bg-dark);
}

[data-theme="light"] .mobile-overlay {
  background: rgba(238,244,255,0.97);
}

[data-theme="light"] .mobile-nav-link {
  color: var(--text-dim);
}
[data-theme="light"] .mobile-nav-link:hover {
  color: var(--cyan);
}

[data-theme="light"] .contact-form input,
[data-theme="light"] .contact-form textarea {
  background: var(--bg-card2);
  border-color: var(--border);
  color: var(--text-main);
}

[data-theme="light"] .form-group input::placeholder,
[data-theme="light"] .form-group textarea::placeholder {
  color: rgba(0,80,160,0.35);
}

[data-theme="light"] .tech-pill {
  background: rgba(0,0,0,0.03);
  border-color: var(--border);
  color: var(--text-dim);
}

[data-theme="light"] #bg-canvas { opacity: 0.08; }

[data-theme="light"] .title-accent {
  filter: drop-shadow(0 0 10px rgba(0,112,192,0.3));
}

[data-theme="light"] .logo-accent { text-shadow: none; color: var(--cyan); }

[data-theme="light"] .btn-primary {
  border-color: var(--cyan);
  color: var(--cyan);
}
[data-theme="light"] .btn-primary:hover {
  background: rgba(0,112,192,0.08);
}

[data-theme="light"] .shortcuts-modal {
  background: var(--bg-card);
}

[data-theme="light"] .toast {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-main);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

/* ---- THEME TRANSITION ---- */
body, .header, .game-card, .stat-card, .modal,
.filter-btn, .search-box, .sort-select {
  transition:
    background var(--transition),
    border-color var(--transition),
    color var(--transition),
    box-shadow var(--transition);
}