:root {
  --primary: 9, 156, 156;
  --secondary: 254, 127, 0;
  --accent: 255, 225, 0;
}

@layer base {
  html {
    font-family:
      system-ui,
      -apple-system,
      sans-serif;
  }
  body {
    letter-spacing: var(--tracking-normal);
  }
}
nav a:hover {
  color: rgb(var(--primary));
}

.button {
  background: white;
}
.button:hover {
  background: #f0f0f0;
}

.button-outline {
  background: transparent;
  border: 2px solid white;
}
.button-outline:hover {
  background: white;
  color: black;
  transition: all 0.3s ease-in-out;
}

.button-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    to right,
    rgb(var(--primary)),
    rgba(var(--primary), 70%)
  ) !important;
  transition: all 0.3s ease-in-out;
}

.button-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgb(var(--primary));
  z-index: -1;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.button-primary:hover::after {
  opacity: 1;
}

.button-secondary {
  background: linear-gradient(
    to right,
    rgb(var(--secondary)),
    rgba(var(--secondary), 70%)
  ) !important;
}

.button-secondary:hover {
  background: rgb(var(--secondary));
}

.button-accent {
  background: linear-gradient(
    to right,
    rgb(var(--accent)),
    rgba(var(--accent), 70%)
  ) !important;
}

.bg-primary {
  background: rgb(var(--primary), 20%);
}

.bg-secondary {
  background: rgb(var(--secondary), 50%);
}
.bg-secondary-gradient {
  background: linear-gradient(
    to right,
    rgb(var(--secondary)),
    rgba(var(--secondary), 80%)
  );
}

.text-primary {
  color: rgb(var(--primary));
}
.text-secondary {
  color: rgb(var(--secondary));
}

.border-primary {
  border: 1px solid rgb(var(--primary));
}
.border-primary-card {
  border: 1px solid rgb(var(--primary), 40%);
}
.border-secondary-card {
  border: 1px solid rgb(var(--secondary), 40%);
}
.border-secondary {
  border: 1px solid rgb(var(--secondary));
}

.marker-primary li::marker {
  color: rgb(var(--primary));
}
.marker-secondary li::marker {
  color: rgb(var(--secondary));
}

/* Animation pour le drag & drop */
.drag-over {
  border-color: oklch(0.6352 0.081 196.3656) !important;
  background-color: oklch(0.6352 0.081 196.3656 / 0.05) !important;
}

/* Animation de chargement */
.loading-spinner {
  border: 3px solid oklch(0.9276 0.0058 264.5313);
  border-top: 3px solid oklch(0.6352 0.081 196.3656);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Styles pour les résultats */
.result-success {
  background-color: oklch(0.7204 0.1574 54.9251 / 0.1);
  border-color: oklch(0.6352 0.081 196.3656);
  color: oklch(0.6352 0.081 196.3656);
}

.result-error {
  background-color: oklch(0.6368 0.2078 25.3313 / 0.1);
  border-color: oklch(0.6368 0.2078 25.3313);
  color: oklch(0.6368 0.2078 25.3313);
}

@keyframes accordion-down {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
  }
}

@keyframes accordion-up {
  from {
    height: var(--radix-accordion-content-height);
  }
  to {
    height: 0;
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.animate-shimmer {
  animation: shimmer 2.2s ease-in-out infinite;
}

@layer utilities {
  .animate-accordion-down {
    animation: accordion-down 0.2s ease-out;
  }

  .animate-accordion-up {
    animation: accordion-up 0.2s ease-out;
  }
}