:root {
  /* Light Mode Colors */
  --light-bg: #ffff00;
  --light-text: #ff0000;
  --light-accent: #ff1493;
  --light-secondary: #dc143c;

  /* Dark Mode Colors */
  --dark-bg-start: #dc143c;
  --dark-bg-end: #0a1428;
  --dark-text-primary: #ffff00;
  --dark-text-secondary: #00ffff;
  --dark-surface: rgba(10, 20, 40, 0.9);

  /* Transition Colors */
  --transition-color-1: #ff0064;
  --transition-color-2: #b41e50;
  --transition-color-3: #8c1e50;
  --transition-color-4: #64235a;
  --transition-color-5: #3c2864;
  --transition-color-6: #1e2d6e;
  --transition-color-7: #0f2350;

  /* Common Colors */
  --border-color: currentColor;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Mode avec transition trouble utilisant les couleurs dynamiques */
body.dark-mode {
  background: radial-gradient(ellipse at 20% 8%, rgba(220, 20, 60, 0.8) 0%, transparent 30%),
    radial-gradient(ellipse at 80% 12%, rgba(255, 0, 100, 0.6) 0%, transparent 25%),
    radial-gradient(ellipse at 40% 15%, rgba(180, 30, 80, 0.4) 0%, transparent 35%),
    linear-gradient(
      180deg,
      var(--dark-bg-start) 0%,
      rgba(220, 20, 60, 0.9) 5%,
      rgba(180, 30, 80, 0.7) 8%,
      rgba(140, 30, 80, 0.5) 10%,
      rgba(100, 35, 90, 0.3) 12%,
      rgba(60, 40, 100, 0.4) 14%,
      rgba(30, 45, 110, 0.6) 16%,
      rgba(15, 35, 80, 0.8) 18%,
      var(--dark-bg-end) 20%
    );
  color: var(--dark-text-secondary);
  min-height: 100vh;
  position: relative;
}

/* Distorsions supplémentaires avec couleurs dynamiques */
body.dark-mode::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 25vh;
  background: radial-gradient(ellipse at 10% 10%, rgba(255, 20, 147, 0.1) 0%, transparent 40%),
    radial-gradient(ellipse at 90% 8%, rgba(0, 255, 255, 0.08) 0%, transparent 35%),
    radial-gradient(ellipse at 50% 15%, rgba(220, 20, 60, 0.06) 0%, transparent 50%);
  z-index: -1;
  animation: colorShift 3s ease-in-out infinite alternate;
}