body {
  font-family: var(--font-body);
  color: var(--clr-text);
  background: var(--clr-bg) fixed no-repeat center/cover, var(--clr-bg);
  background-image: var(--bg-image);
  transition: background-color 0.3s ease, color 0.3s ease;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* Assurer que html et body couvrent tout l'écran */
html {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* ================================================================== */
/* THÈME CLAIR - Mapping des composants selon l'affiche HFCustoms */
/* ================================================================== */

/* Body en mode clair avec dégradé industriel */
[data-theme="light"] body {
  background: var(--bg) !important;
  color: var(--text) !important;
  background-image: var(--bg-image) !important;
  background-size: 100% 100%, 150% 150%, 120% 120% !important;
  background-position: center center, top left, bottom right !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  min-height: 100vh !important;
  width: 100% !important;
}

/* Assurer que l'image de fond reste visible sous les sections */
[data-theme="light"] .bg-gray-900,
[data-theme="light"] .bg-black,
[data-theme="light"] .bg-gray-800 {
  background-color: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(2px) !important;
}

/* Hero section plus transparente pour laisser voir l'image de fond */
[data-theme="light"] .bg-black\/60 {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

[data-theme="light"] .bg-black\/80 {
  background-color: rgba(255, 255, 255, 0.4) !important;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) body {
    background: var(--bg) !important;
    color: var(--text) !important;
    background-image: var(--bg-image) !important;
    background-size: 100% 100%, 150% 150%, 120% 120% !important;
    background-position: center center, top left, bottom right !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    min-height: 100vh !important;
    width: 100% !important;
  }
  
  /* Sections transparentes pour voir l'image de fond */
  :root:not([data-theme]) .bg-gray-900,
  :root:not([data-theme]) .bg-black,
  :root:not([data-theme]) .bg-gray-800 {
    background-color: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(2px) !important;
  }
  
  :root:not([data-theme]) .bg-black\/60 {
    background-color: rgba(255, 255, 255, 0.3) !important;
  }
  
  :root:not([data-theme]) .bg-black\/80 {
    background-color: rgba(255, 255, 255, 0.4) !important;
  }
}

/* Cards / sections en mode clair */
[data-theme="light"] .card {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px) !important;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .card {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px) !important;
  }
}

/* Titres en mode clair */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
  color: var(--subtle);
  letter-spacing: 0.2px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) h1,
  :root:not([data-theme]) h2,
  :root:not([data-theme]) h3,
  :root:not([data-theme]) h4,
  :root:not([data-theme]) h5,
  :root:not([data-theme]) h6 {
    color: var(--subtle);
    letter-spacing: 0.2px;
  }
}

/* Texte secondaire en mode clair */
[data-theme="light"] .text-gray-300,
[data-theme="light"] .text-gray-400 {
  color: var(--muted) !important;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .text-gray-300,
  :root:not([data-theme]) .text-gray-400 {
    color: var(--muted) !important;
  }
}

/* Liens en mode clair */
[data-theme="light"] a {
  color: var(--accent);
}

[data-theme="light"] a:hover {
  text-decoration: underline;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) a {
    color: var(--accent);
  }
  
  :root:not([data-theme]) a:hover {
    text-decoration: underline;
  }
}

/* Boutons primaires en mode clair */
[data-theme="light"] .btn-primary {
  background: var(--accent);
  color: var(--accent-contrast);
  border: none;
}

[data-theme="light"] .btn-primary:hover {
  filter: brightness(0.95);
}

[data-theme="light"] .btn-primary:focus {
  outline: 2px solid rgba(243,105,26,.35);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .btn-primary {
    background: var(--accent);
    color: var(--accent-contrast);
    border: none;
  }
  
  :root:not([data-theme]) .btn-primary:hover {
    filter: brightness(0.95);
  }
  
  :root:not([data-theme]) .btn-primary:focus {
    outline: 2px solid rgba(243,105,26,.35);
  }
}

/* Boutons secondaires en mode clair */
[data-theme="light"] .btn-secondary {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--subtle);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .btn-secondary {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--subtle);
  }
}

/* Inputs en mode clair */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}

[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) input,
  :root:not([data-theme]) select,
  :root:not([data-theme]) textarea {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
  }
  
  :root:not([data-theme]) input:focus,
  :root:not([data-theme]) select:focus,
  :root:not([data-theme]) textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
}

.card {
  background: var(--clr-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border-color);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--clr-primary), #4AC8FF);
  color: #0b1220;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #4AC8FF, var(--clr-primary));
  transform: translateY(-2px);
}

/* Adaptations mobile */
@media (max-width: 768px) {
  body {
    background-attachment: scroll; /* Meilleure performance mobile */
  }
  
  /* Typography mobile */
  .text-4xl { font-size: 2rem !important; }
  .text-5xl { font-size: 2.5rem !important; }
  .text-6xl { font-size: 3rem !important; }
  .text-7xl { font-size: 3.5rem !important; }
  
  /* Spacing mobile */
  .py-20 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .py-16 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .px-6 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .gap-8 { gap: 1rem !important; }
  .mb-12 { margin-bottom: 2rem !important; }
  
  /* Cards responsive */
  .grid { gap: 1rem !important; }
  
  /* Buttons mobile */
  .btn-primary {
    padding: 0.75rem 1.5rem !important;
    font-size: 0.9rem !important;
  }
}

@media (max-width: 640px) {
  /* Ultra mobile */
  .min-h-screen { min-height: 80vh !important; }
  .h-screen { height: 80vh !important; }
  .text-xl { font-size: 1.1rem !important; }
  .text-2xl { font-size: 1.5rem !important; }
  .p-8 { padding: 1.5rem !important; }
  .p-6 { padding: 1rem !important; }
  .p-4 { padding: 0.75rem !important; }
  
  /* Navigation mobile */
  .hidden { display: none !important; }
  
  /* Forms mobile */
  input, select, textarea {
    font-size: 16px !important; /* Évite le zoom iOS */
  }
}

/* Animations et transitions */
.transition-colors {
  transition: color 0.3s ease, background-color 0.3s ease;
}

.transition-all {
  transition: all 0.3s ease;
}

/* Focus states améliorés */
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--clr-primary);
  outline-offset: 2px;
}

/* Hover states pour touch devices */
@media (hover: hover) {
  .hover\:scale-105:hover {
    transform: scale(1.05);
  }
}

/* Theme toggle button */
.theme-toggle {
  background: var(--clr-surface);
  border: 1px solid var(--border-color);
  color: var(--clr-text);
  transition: all 0.3s ease;
}

.theme-toggle:hover {
  background: var(--clr-bg);
  transform: scale(1.1);
}

/* ------------------------------------------------------------------ */
/* Dynamic theming overrides so tailwind dark utilities adapt in light */
/* ------------------------------------------------------------------ */

/* Background utilities remapped to semantic CSS variables */
.bg-black { background-color: var(--bg-primary) !important; }
.bg-gray-900 { background-color: var(--bg-secondary) !important; }
.bg-gray-800 { background-color: var(--bg-card) !important; }

/* Text color utilities */
.text-white { color: var(--text-primary) !important; }
.text-gray-300 { color: var(--text-secondary) !important; }
.text-gray-400 { color: var(--text-muted) !important; }

/* Border utilities */
.border-gray-700, .border-gray-600 { border-color: var(--border-color) !important; }

/* ================================================================== */
/* THÈME CLAIR - Utilitaires Tailwind remappés */
/* ================================================================== */

/* Gradient helpers remappés pour le thème clair */
[data-theme="light"] .from-gray-900 { 
  --tw-gradient-from: var(--surface) !important; 
}

[data-theme="light"] .to-black { 
  --tw-gradient-to: var(--bg) !important; 
}

[data-theme="light"] .bg-gradient-to-r {
  background: linear-gradient(to right, var(--surface), var(--bg));
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .from-gray-900 { 
    --tw-gradient-from: var(--surface) !important; 
  }
  
  :root:not([data-theme]) .to-black { 
    --tw-gradient-to: var(--bg) !important; 
  }
  
  :root:not([data-theme]) .bg-gradient-to-r {
    background: linear-gradient(to right, var(--surface), var(--bg));
  }
}

/* Messages de statut avec nouvelles couleurs */
[data-theme="light"] .bg-green-600\/20 {
  background-color: rgba(34, 197, 94, 0.1) !important;
}

[data-theme="light"] .border-green-500 {
  border-color: var(--success) !important;
}

[data-theme="light"] .text-green-400 {
  color: var(--success) !important;
}

[data-theme="light"] .bg-red-600\/20 {
  background-color: rgba(239, 68, 68, 0.1) !important;
}

[data-theme="light"] .border-red-500 {
  border-color: var(--error) !important;
}

[data-theme="light"] .text-red-400 {
  color: var(--error) !important;
}

[data-theme="light"] .bg-orange-500\/20 {
  background-color: rgba(243, 105, 26, 0.1) !important;
}

[data-theme="light"] .border-orange-500\/30 {
  border-color: rgba(243, 105, 26, 0.3) !important;
}

[data-theme="light"] .text-orange-500 {
  color: var(--accent) !important;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .bg-green-600\/20 {
    background-color: rgba(34, 197, 94, 0.1) !important;
  }
  
  :root:not([data-theme]) .border-green-500 {
    border-color: var(--success) !important;
  }
  
  :root:not([data-theme]) .text-green-400 {
    color: var(--success) !important;
  }
  
  :root:not([data-theme]) .bg-red-600\/20 {
    background-color: rgba(239, 68, 68, 0.1) !important;
  }
  
  :root:not([data-theme]) .border-red-500 {
    border-color: var(--error) !important;
  }
  
  :root:not([data-theme]) .text-red-400 {
    color: var(--error) !important;
  }
  
  :root:not([data-theme]) .bg-orange-500\/20 {
    background-color: rgba(243, 105, 26, 0.1) !important;
  }
  
  :root:not([data-theme]) .border-orange-500\/30 {
    border-color: rgba(243, 105, 26, 0.3) !important;
  }
  
  :root:not([data-theme]) .text-orange-500 {
    color: var(--accent) !important;
  }
}

/* Semi‑transparent overlays remappées */
.bg-black\/60 { background-color: rgba(0,0,0,0.6) !important; }
.bg-black\/80 { background-color: rgba(0,0,0,0.8) !important; }

[data-theme="light"] .bg-black\/60 { 
  background-color: rgba(18,20,23,0.1) !important; 
}

[data-theme="light"] .bg-black\/80 { 
  background-color: rgba(18,20,23,0.15) !important; 
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .bg-black\/60 { 
    background-color: rgba(18,20,23,0.1) !important; 
  }
  
  :root:not([data-theme]) .bg-black\/80 { 
    background-color: rgba(18,20,23,0.15) !important; 
  }
}

/* Ensure cards & buttons inherit updated variable colors */
[data-theme="light"] .card { 
  background: var(--surface); 
  border-color: var(--border);
  box-shadow: var(--shadow);
}

[data-theme="light"] .btn-primary { 
  background: var(--accent);
  color: var(--accent-contrast); 
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .card { 
    background: var(--surface); 
    border-color: var(--border);
    box-shadow: var(--shadow);
  }
  
  :root:not([data-theme]) .btn-primary { 
    background: var(--accent);
    color: var(--accent-contrast); 
  }
}

/* Smooth transition on utility overrides */
.bg-black, .bg-gray-900, .bg-gray-800, .text-white, .text-gray-300, .text-gray-400 {
  transition: background-color 0.3s ease, color 0.3s ease;
}