@import "tailwindcss";
@import "@nuxt/ui";

@theme {
  --font-title: "Fredoka", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-subtitle: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

/* === Polices utilitaires === */
@utility font-title {
  font-family: var(--font-title);
}
@utility font-subtitle {
  font-family: var(--font-subtitle);
}
@utility font-text {
  font-family: var(--font-text);
}

/* === Classes Kotid === */
.kotid-title {
  @apply font-title font-black tracking-tight text-neutral-900;
}

.kotid-subtitle {
  @apply font-subtitle font-semibold tracking-tight text-neutral-800;
}

.kotid-text {
  @apply font-text leading-7 text-neutral-700;
}

.kotid-btn-label {
  @apply font-subtitle font-medium;
}

.swiipo-spinner-red {
  border-style: solid;
  border-radius: 50%;
  border-color: #ef4444 transparent transparent transparent; /* rouge */
  animation: spin 0.8s linear infinite;
}

.swiipo-spinner-emerald {
  border-style: solid;
  border-radius: 50%;
  border-color: #10b981 transparent transparent transparent; /* vert émeraude */
  animation: spin 0.8s linear infinite;
}

.swiipo-spinner-pink {
  border-style: solid;
  border-radius: 50%;
  border-color: oklch(71.8% 0.202 349.761) transparent transparent transparent; /* pink */
  animation: spin 0.8s linear infinite;
}

.swiipo-spinner-yellow {
  border-style: solid;
  border-radius: 50%;
  border-color: #facc15 transparent transparent transparent; /* jaune */
  animation: spin 0.8s linear infinite;
}

.swiipo-spinner-orange {
  border-style: solid;
  border-radius: 50%;
  border-color: #f97316 transparent transparent transparent; /* orange */
  animation: spin 0.8s linear infinite;
}

.swiipo-spinner-wandb {
  border-style: solid;
  border-radius: 50%;
  border-color: #000 transparent transparent transparent; /* noir */
  animation: spin 0.8s linear infinite;
}

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