@tailwind base;
@tailwind components;
@tailwind utilities;

/* PayPal-like clean UI layer built on Tailwind utilities.
   Accent color = La Badgeuse violet (#8224E3). */
:root{
  --badgeuse: #8224E3;         /* violet principal */
  --badgeuse-strong: #6B1BC0;  /* violet + sombre */
  --badgeuse-deep: #2B0A4F;    /* fond section pleine */
  --badgeuse-soft: #B98CFF;    /* highlight clair */
}

/* If Tailwind preflight is not applied for any reason, keep links clean. */
@layer base {
  html { scroll-behavior: smooth; }
  body { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; }
  a { color: inherit; text-decoration: none; }
}

/* Brand helpers */
.bg-badgeuse{ background-color: var(--badgeuse); }
.bg-badgeuse-strong{ background-color: var(--badgeuse-strong); }
.bg-badgeuse-deep{ background-color: var(--badgeuse-deep); }
.text-badgeuse{ color: var(--badgeuse); }
.text-badgeuse-soft{ color: var(--badgeuse-soft); }

/* Component layer: consistent spacing, buttons, chips, cards */
@layer components {
  .container-xl { @apply mx-auto max-w-7xl px-4; }

  .nav-link { @apply inline-flex items-center rounded-full px-3 py-2 text-sm font-semibold text-slate-700 hover:text-slate-950 hover:bg-slate-100 transition; }
  .nav-btn { @apply inline-flex items-center justify-center rounded-full px-4 py-2 text-sm font-semibold transition; }
  .nav-btn-outline { @apply nav-btn border border-slate-900 text-slate-950 hover:bg-slate-900 hover:text-white; }
  .nav-btn-solid { @apply nav-btn bg-slate-950 text-white hover:bg-slate-800; }

  .btn { @apply inline-flex items-center justify-center rounded-full px-6 py-3 font-semibold transition; }
  .btn-primary { @apply btn bg-slate-950 text-white hover:bg-slate-800; }
  .btn-accent { @apply btn text-white; background-color: var(--badgeuse); }
  .btn-accent:hover { background-color: var(--badgeuse-strong); }
  .btn-outline { @apply btn border border-slate-900 text-slate-950 hover:bg-slate-900 hover:text-white; }

  .chip { @apply inline-flex items-center gap-2 rounded-full bg-slate-100 px-3 py-1 text-sm font-semibold text-slate-700; }
  .segmented { @apply inline-flex rounded-full bg-slate-100 p-1 text-sm font-semibold shadow-sm border border-slate-200; }
  .segmented button { @apply rounded-full px-4 py-2 transition; }
  .segmented .is-active { @apply bg-slate-950 text-white; }
  .segmented .is-idle { @apply text-slate-700 hover:bg-slate-200/60; }

  .card { @apply rounded-[28px] border border-slate-200 bg-white shadow-sm; }
  .card-soft { @apply rounded-[28px] border border-slate-200 bg-slate-50; }
  .shadow-premium { box-shadow: 0 25px 60px rgba(15, 23, 42, .12); }

  .h1 { @apply text-5xl sm:text-6xl md:text-7xl font-black tracking-tight; }
  .h2 { @apply text-4xl sm:text-5xl font-black tracking-tight; }
  .lead { @apply mt-4 text-base sm:text-lg text-slate-600 leading-relaxed; }
}

/* Utility helpers for ring color */
.ring-badgeuse{ --tw-ring-color: color-mix(in srgb, var(--badgeuse) 55%, transparent); }
.focus\:ring-badgeuse\/40:focus{ --tw-ring-color: color-mix(in srgb, var(--badgeuse) 40%, transparent); }