:root {
  /* Vert */
  --pikai-green-50:  #EAF8EA;
  --pikai-green-100: #CDEECD;
  --pikai-green-200: #AFE4AF;
  --pikai-green-300: #92DA92;
  --pikai-green-400: #75D075;
  --pikai-green-500: #7FC27F;
  --pikai-green-600: #64A864;
  --pikai-green-700: #4B944B;
  --pikai-green-800: #3A7B3A;
  --pikai-green-900: #2E662E;
  --pikai-green-950: #245124;

  /* Jaune */
  --pikai-yellow-50:  #FFFBEA;
  --pikai-yellow-100: #FFF5C7;
  --pikai-yellow-200: #FFEEA3;
  --pikai-yellow-300: #FFE87F;
  --pikai-yellow-400: #FFE15B;
  --pikai-yellow-500: #FFD935;
  --pikai-yellow-600: #F7DC6F;
  --pikai-yellow-700: #E7C847;
  --pikai-yellow-800: #D2B32E;
  --pikai-yellow-900: #BFA020;
  --pikai-yellow-950: #9F8515;
}

/* Helpers simples façon Tailwind */
.text-pikai-green-50 { color: var(--pikai-green-50); }
.text-pikai-green-100 { color: var(--pikai-green-100); }
.text-pikai-green-200 { color: var(--pikai-green-200); }
.text-pikai-green-300 { color: var(--pikai-green-300); }
.text-pikai-green-400 { color: var(--pikai-green-400); }
.text-pikai-green-500 { color: var(--pikai-green-500); }
.text-pikai-green-600 { color: var(--pikai-green-600); }
.text-pikai-green-700 { color: var(--pikai-green-700); }
.text-pikai-green-800 { color: var(--pikai-green-800); }
.text-pikai-green-900 { color: var(--pikai-green-900); }
.text-pikai-green-950 { color: var(--pikai-green-950); }

.hover\:text-pikai-green-500:hover { color: var(--pikai-green-500); }

.bg-pikai-green-50 { background-color: color-mix(in srgb, var(--pikai-green-50) 50%, transparent);}
.bg-pikai-green-100 { background-color: var(--pikai-green-100); }
.bg-pikai-green-200 { background-color: var(--pikai-green-200); }
.bg-pikai-green-300 { background-color: var(--pikai-green-300); }
.bg-pikai-green-400 { background-color: var(--pikai-green-400); }
.bg-pikai-green-500 { background-color: var(--pikai-green-500); }
.bg-pikai-green-600 { background-color: var(--pikai-green-600); }
.bg-pikai-green-700 { background-color: var(--pikai-green-700); }
.bg-pikai-green-800 { background-color: var(--pikai-green-800); }
.bg-pikai-green-900 { background-color: var(--pikai-green-900); }
.bg-pikai-green-950 { background-color: var(--pikai-green-950); }

.border-pikai-green-50 { border-color: var(--pikai-green-50); }
.border-pikai-green-100 { border-color: var(--pikai-green-100); }
.border-pikai-green-200 { border-color: var(--pikai-green-200); }
.border-pikai-green-300 { border-color: var(--pikai-green-300); }
.border-pikai-green-400 { border-color: var(--pikai-green-400); }
.border-pikai-green-500 { border-color: var(--pikai-green-500); }
.border-pikai-green-600 { border-color: var(--pikai-green-600); }
.border-pikai-green-700 { border-color: var(--pikai-green-700); }
.border-pikai-green-800 { border-color: var(--pikai-green-800); }
.border-pikai-green-900 { border-color: var(--pikai-green-900); }
.border-pikai-green-950 { border-color: var(--pikai-green-950); }

/* === 🌼 Classes jaunes === */
.text-pikai-yellow-50 { color: var(--pikai-yellow-50); }
.text-pikai-yellow-100 { color: var(--pikai-yellow-100); }
.text-pikai-yellow-200 { color: var(--pikai-yellow-200); }
.text-pikai-yellow-300 { color: var(--pikai-yellow-300); }
.text-pikai-yellow-400 { color: var(--pikai-yellow-400); }
.text-pikai-yellow-500 { color: var(--pikai-yellow-500); }
.text-pikai-yellow-600 { color: var(--pikai-yellow-600); }
.text-pikai-yellow-700 { color: var(--pikai-yellow-700); }
.text-pikai-yellow-800 { color: var(--pikai-yellow-800); }
.text-pikai-yellow-900 { color: var(--pikai-yellow-900); }
.text-pikai-yellow-950 { color: var(--pikai-yellow-950); }

.bg-pikai-yellow-50 { background-color: var(--pikai-yellow-50); }
.bg-pikai-yellow-100 { background-color: var(--pikai-yellow-100); }
.bg-pikai-yellow-200 { background-color: var(--pikai-yellow-200); }
.bg-pikai-yellow-300 { background-color: var(--pikai-yellow-300); }
.bg-pikai-yellow-400 { background-color: var(--pikai-yellow-400); }
.bg-pikai-yellow-500 { background-color: var(--pikai-yellow-500); }
.bg-pikai-yellow-600 { background-color: var(--pikai-yellow-600); }
.bg-pikai-yellow-700 { background-color: var(--pikai-yellow-700); }
.bg-pikai-yellow-800 { background-color: var(--pikai-yellow-800); }
.bg-pikai-yellow-900 { background-color: var(--pikai-yellow-900); }
.bg-pikai-yellow-950 { background-color: var(--pikai-yellow-950); }

.border-pikai-yellow-50 { border-color: var(--pikai-yellow-50); }
.border-pikai-yellow-100 { border-color: var(--pikai-yellow-100); }
.border-pikai-yellow-200 { border-color: var(--pikai-yellow-200); }
.border-pikai-yellow-300 { border-color: var(--pikai-yellow-300); }
.border-pikai-yellow-400 { border-color: var(--pikai-yellow-400); }
.border-pikai-yellow-500 { border-color: var(--pikai-yellow-500); }
.border-pikai-yellow-600 { border-color: var(--pikai-yellow-600); }
.border-pikai-yellow-700 { border-color: var(--pikai-yellow-700); }
.border-pikai-yellow-800 { border-color: var(--pikai-yellow-800); }
.border-pikai-yellow-900 { border-color: var(--pikai-yellow-900); }
.border-pikai-yellow-950 { border-color: var(--pikai-yellow-950); }
.btn-green {
  background: linear-gradient(
    to bottom right,
    var(--pikai-green-400),
    var(--pikai-green-600)
  );
}
.btn-green:hover {
  background: linear-gradient(
    to bottom right,
    var(--pikai-green-300),
    var(--pikai-green-500)
  );
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Bouton jaune */
.btn-yellow {
  background: linear-gradient(
    to bottom right,
    var(--pikai-yellow-400),
    var(--pikai-yellow-600)
  );
}
.btn-yellow:hover {
  background: linear-gradient(
    to bottom right,
    var(--pikai-yellow-300),
    var(--pikai-yellow-700)
  );
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}