/* assets/css/theme.css
 * HR Suite Deluxe Theme 2025
 * Tailwind est chargé via CDN – ici on ajuste les couleurs et les modes.
 */

/* Couleurs par défaut (mode standard) */
:root {
  --hr-bg:           #f8fafc; /* body */
  --hr-surface:      #ffffff; /* cartes */
  --hr-surface-soft: #f1f5f9;
  --hr-border:       #e2e8f0;
  --hr-text:         #0f172a;
  --hr-text-soft:    #64748b;
}

body {
  background-color: var(--hr-bg);
  color: var(--hr-text);
  transition: background-color .25s ease, color .25s ease;
}

/* Petits bonus visuels pour les cartes */
.bg-white.rounded,
.bg-white.rounded-lg,
.bg-white.rounded-xl,
.bg-white.rounded-2xl {
  box-shadow: 0 18px 40px rgba(15, 23, 42, .06);
}

/* ========= MODE NUIT ========= */
body[data-hr-mode="night"] {
  --hr-bg:           #020617;
  --hr-surface:      #020617;
  --hr-surface-soft: #020617;
  --hr-border:       #1f2937;
  --hr-text:         #e5e7eb;
  --hr-text-soft:    #9ca3af;
  background-color: var(--hr-bg);
  color: var(--hr-text);
}

body[data-hr-mode="night"] header {
  background: rgba(15, 23, 42, .96);
  border-color: #1f2937;
}

/* surfaces */
body[data-hr-mode="night"] .bg-white,
body[data-hr-mode="night"] .bg-slate-50,
body[data-hr-mode="night"] .bg-slate-100 {
  background-color: #020617 !important;
}

/* textes */
body[data-hr-mode="night"] .text-slate-900,
body[data-hr-mode="night"] .text-slate-800,
body[data-hr-mode="night"] .text-slate-700 {
  color: var(--hr-text) !important;
}
body[data-hr-mode="night"] .text-slate-600,
body[data-hr-mode="night"] .text-slate-500 {
  color: var(--hr-text-soft) !important;
}

/* bordures */
body[data-hr-mode="night"] .border-slate-200,
body[data-hr-mode="night"] .border-slate-300 {
  border-color: var(--hr-border) !important;
}

/* ========= MODE LECTURE (SEPIA) ========= */
body[data-hr-mode="reading"] {
  --hr-bg:           #fdf6e3;
  --hr-surface:      #fefaf1;
  --hr-surface-soft: #fdf3c7;
  --hr-border:       #f5d48a;
  --hr-text:         #3f3a22;
  --hr-text-soft:    #7c6f4b;
  background-color: var(--hr-bg);
  color: var(--hr-text);
}

body[data-hr-mode="reading"] header {
  background: rgba(253, 246, 227, .96);
  border-color: #f5d48a;
}

body[data-hr-mode="reading"] .bg-white,
body[data-hr-mode="reading"] .bg-slate-50,
body[data-hr-mode="reading"] .bg-slate-100 {
  background-color: var(--hr-surface) !important;
}

body[data-hr-mode="reading"] .text-slate-900,
body[data-hr-mode="reading"] .text-slate-800,
body[data-hr-mode="reading"] .text-slate-700 {
  color: var(--hr-text) !important;
}
body[data-hr-mode="reading"] .text-slate-600,
body[data-hr-mode="reading"] .text-slate-500 {
  color: var(--hr-text-soft) !important;
}

body[data-hr-mode="reading"] .border-slate-200,
body[data-hr-mode="reading"] .border-slate-300 {
  border-color: var(--hr-border) !important;
}

/* ========= MODE PHOTO ========= */
body[data-hr-mode="photo"] {
  --hr-bg:           #000000;
  --hr-surface:      #020617;
  --hr-surface-soft: #020617;
  --hr-border:       #111827;
  --hr-text:         #f9fafb;
  --hr-text-soft:    #9ca3af;
  background-color: var(--hr-bg);
  color: var(--hr-text);
}

body[data-hr-mode="photo"] header {
  background: rgba(15, 23, 42, .98);
  border-color: #111827;
}

/* cartes foncées qui mettent les photos en valeur */
body[data-hr-mode="photo"] .bg-white,
body[data-hr-mode="photo"] .bg-slate-50,
body[data-hr-mode="photo"] .bg-slate-100 {
  background-color: #020617 !important;
}

/* texte clair */
body[data-hr-mode="photo"] .text-slate-900,
body[data-hr-mode="photo"] .text-slate-800,
body[data-hr-mode="photo"] .text-slate-700 {
  color: var(--hr-text) !important;
}
body[data-hr-mode="photo"] .text-slate-600,
body[data-hr-mode="photo"] .text-slate-500 {
  color: var(--hr-text-soft) !important;
}

/* bordures */
body[data-hr-mode="photo"] .border-slate-200,
body[data-hr-mode="photo"] .border-slate-300 {
  border-color: var(--hr-border) !important;
}

/* légère accentuation des images */
body[data-hr-mode="photo"] img {
  filter: saturate(1.05) contrast(1.05);
}

/* ========= MODE MULTIMÉDIA ========= */
body[data-hr-mode="media"] {
  --hr-bg:           #020617;
  --hr-surface:      #020617;
  --hr-surface-soft: #020617;
  --hr-border:       #1d4ed8;
  --hr-text:         #e5e7eb;
  --hr-text-soft:    #93c5fd;
  background:
    radial-gradient(circle at top left, #1d4ed8 0, transparent 55%),
    radial-gradient(circle at bottom right, #0f766e 0, transparent 55%),
    #020617;
  color: var(--hr-text);
}

body[data-hr-mode="media"] header {
  background: rgba(15, 23, 42, .96);
  border-color: #1d4ed8;
}

/* cartes légèrement transparentes */
body[data-hr-mode="media"] .bg-white,
body[data-hr-mode="media"] .bg-slate-50,
body[data-hr-mode="media"] .bg-slate-100 {
  background-color: rgba(15, 23, 42, .9) !important;
}

/* textes */
body[data-hr-mode="media"] .text-slate-900,
body[data-hr-mode="media"] .text-slate-800,
body[data-hr-mode="media"] .text-slate-700 {
  color: var(--hr-text) !important;
}
body[data-hr-mode="media"] .text-slate-600,
body[data-hr-mode="media"] .text-slate-500 {
  color: var(--hr-text-soft) !important;
}

/* bordures */
body[data-hr-mode="media"] .border-slate-200,
body[data-hr-mode="media"] .border-slate-300 {
  border-color: var(--hr-border) !important;
}

/* Petit effet sur les boutons principaux en mode multimédia */
body[data-hr-mode="media"] .bg-blue-600,
body[data-hr-mode="media"] .bg-emerald-600 {
  box-shadow: 0 10px 30px rgba(37, 99, 235, .6);
}