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

/* === BRAND COLORS === */
:root {
  --badgeuse: #8224e3;
  --badgeuse-dark: #6b1bc0;
  --badgeuse-soft: #b98cff;
}

/* === BASE === */
@layer base {
  html { scroll-behavior: smooth; }
  body { @apply bg-white text-slate-900 antialiased; }
}

/* === COMPONENTS (PayPal-like) === */
@layer components {

  .container-xl {
    @apply mx-auto max-w-7xl px-6;
  }

  /* NAV */
  .nav-link {
    @apply text-sm font-semibold text-slate-700 hover:text-slate-950 transition;
  }

  /* BUTTONS */
  .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-outline {
    @apply btn border border-slate-900 text-slate-900 hover:bg-slate-900 hover:text-white;
  }

  .btn-accent {
    @apply btn text-white;
    background: var(--badgeuse);
  }

  .btn-accent:hover {
    background: var(--badgeuse-dark);
  }

  /* TYPO */
  .h1 {
    @apply text-5xl sm:text-6xl md:text-7xl font-black tracking-tight;
  }

  .lead {
    @apply mt-6 text-lg text-slate-600 max-w-2xl mx-auto;
  }

  /* CHIP */
  .chip {
    @apply inline-flex items-center gap-2 rounded-full bg-slate-100 px-4 py-1 text-sm font-semibold;
  }

  /* CARD */
  .card {
    @apply rounded-[28px] border border-slate-200 bg-white shadow-lg;
  }
}