/* ---------------------------------------------------------
   Le light = palette normale (base/contrast/accent-*)
   Le dark = remap vers base-dark/contrast-dark/accent-*-dark
---------------------------------------------------------- */

/* Auto dark si pas de choix manuel */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --wp--preset--color--base: var(--wp--preset--color--base-dark);
    --wp--preset--color--contrast: var(--wp--preset--color--contrast-dark);

    --wp--preset--color--accent-1: var(--wp--preset--color--accent-1-dark);
    --wp--preset--color--accent-2: var(--wp--preset--color--accent-2-dark);
    --wp--preset--color--accent-3: var(--wp--preset--color--accent-3-dark);
    --wp--preset--color--accent-4: var(--wp--preset--color--accent-4-dark);
    --wp--preset--color--accent-5: var(--wp--preset--color--accent-5-dark);
    --wp--preset--color--accent-6: var(--wp--preset--color--accent-6-dark);
    
    --wp--preset--color--surface-1: var(--wp--preset--color--surface-1-dark);
    --wp--preset--color--surface-2: var(--wp--preset--color--surface-2-dark);
    --wp--preset--color--surface-3: var(--wp--preset--color--surface-3-dark);

    color-scheme: dark;
  }
}

/* Forçage manuel */
:root[data-theme="light"] { color-scheme: light; }

:root[data-theme="dark"] {
  --wp--preset--color--base: var(--wp--preset--color--base-dark);
  --wp--preset--color--contrast: var(--wp--preset--color--contrast-dark);

  --wp--preset--color--accent-1: var(--wp--preset--color--accent-1-dark);
  --wp--preset--color--accent-2: var(--wp--preset--color--accent-2-dark);
  --wp--preset--color--accent-3: var(--wp--preset--color--accent-3-dark);
  --wp--preset--color--accent-4: var(--wp--preset--color--accent-4-dark);
  --wp--preset--color--accent-5: var(--wp--preset--color--accent-5-dark);
  --wp--preset--color--accent-6: var(--wp--preset--color--accent-6-dark);

  --wp--preset--color--surface-1: var(--wp--preset--color--surface-1-dark);
  --wp--preset--color--surface-2: var(--wp--preset--color--surface-2-dark);
  --wp--preset--color--surface-3: var(--wp--preset--color--surface-3-dark);

  color-scheme: dark;
}

/* ---------------------------------------------------------
   Bouton ghost emoji-only
---------------------------------------------------------- */
.theme-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;

  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 999px;

  display: inline-grid;
  place-items: center;
  line-height: 1;
}

.theme-toggle:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.theme-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent);
}

.theme-toggle__icon { font-size: 1.05rem; }

/* Mobile: caché dans la barre, visible seulement quand le menu overlay est ouvert */
@media (max-width: 781px) {
  header .theme-toggle { display: none; }

  /* Quand l’overlay est ouvert, on l’affiche en fixed en haut à droite */
  .has-modal-open .theme-toggle {
    display: inline-grid;
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 100000;
  }
}