/*
  Yuzuctus - Desert Vivant Theme Switch
  Day: sable et soleil, contraste maximal
  Night: cieux du desert nocturne, sources lumineuses definies
*/

[data-theme="night"] {
  --bg: #1a2b2a;
  --bg-start: #0d1716;
  --bg-end: #1a2b2a;
  --fg: #f0f5f4;
  --fg-muted: #c2cccb;
  --fg-quiet: #7a9392;
  --accent: #7dd4b8;
  --accent-strong: #5EAAA9;
  --link: #82CDC2;
  --link-hover: #A6E9D1;
  --surface: #243836;
  --surface-tinted: #2a4240;
  --border: #4a706d;
  --border-soft: #3d5f5d;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --shadow-stamp-color: rgba(0, 0, 0, 0.5);
  --cta: #e8709e;
  --cta-hover: #fa8db3;
  --warm: #3a3820;
  --warm-border: #6b6330;
  --danger: #d46b6b;
  --scrollbar-track: #233634;
  --scrollbar-thumb: #5EAAA9;
  --scrollbar-thumb-hover: #7DD4B8;
  --scrollbar-thumb-active: #8CE1C6;

  --shadow-soft: 0 2px 8px var(--shadow-color);
  --shadow-md: 0 4px 16px var(--shadow-color);
  --shadow-stamp: 3px 3px 0 var(--shadow-stamp-color);
  --shadow-stamp-hover: 2px 2px 0 var(--shadow-stamp-color);
  --shadow-glow: 0 0 24px rgba(125, 212, 184, 0.15);
}

.theme-toggle {
  background: none;
  border: 2px solid var(--border);
  color: var(--fg);
  cursor: pointer;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  transition: background var(--dur-normal) var(--ease-swish),
              border-color var(--dur-normal) var(--ease-swish),
              color var(--dur-normal) var(--ease-swish),
              transform var(--dur-fast) var(--ease-bloom);
  line-height: 1;
  padding: 0;
}

.theme-toggle-icon {
  width: 1.2rem;
  height: 1.2rem;
  stroke-width: 2;
  fill: none;
}

.theme-toggle .icon-sun {
  display: none;
}

[data-theme="night"] .theme-toggle .icon-moon {
  display: none;
}

[data-theme="night"] .theme-toggle .icon-sun {
  display: block;
}

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

.theme-toggle:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

[data-theme="night"] .theme-toggle {
  border-color: rgba(125, 212, 184, 0.3);
  color: var(--fg-muted);
}

[data-theme="night"] .theme-toggle:hover {
  background: var(--accent);
  color: var(--bg-start);
}