@import "tailwindcss";

/* Jetons de couleur : statuts réservés (succès / attention / danger), série principale bleue. */
@theme {
  --color-fond: #f6f6f4;
  --color-surface: #ffffff;
  --color-bord: #e4e3df;
  --color-encre: #0b0b0b;
  --color-encre-2: #52514e;
  --color-encre-3: #7a7974;
  --color-accent: #2a78d6;
  --color-accent-clair: #cde2fb;
  --color-succes: #0ca30c;
  --color-attention: #fab219;
  --color-serieux: #ec835a;
  --color-danger: #d03b3b;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html,
body {
  background: var(--color-fond);
  color: var(--color-encre);
}

.chiffres {
  font-variant-numeric: tabular-nums;
}

@layer components {
  .champ {
    @apply block w-full rounded-lg border border-bord bg-surface px-3 py-2 text-sm outline-none focus:border-accent focus:ring-2 focus:ring-accent-clair;
  }
  .bouton-principal {
    @apply inline-flex items-center justify-center gap-2 rounded-lg bg-accent px-4 py-2 text-sm font-medium text-white hover:brightness-110 disabled:opacity-60;
  }
  .bouton {
    @apply inline-flex items-center justify-center gap-2 rounded-lg border border-bord bg-surface px-3 py-2 text-sm font-medium text-encre hover:bg-fond disabled:opacity-60;
  }
  .carte {
    @apply rounded-xl border border-bord bg-surface;
  }
  .titre-carte {
    @apply text-sm font-semibold text-encre;
  }
}