/* index.css – Aptiva base layer  */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* --- 1) BODY RESET/COLOURS ------------------------------- */
@layer base {
  body {
    @apply bg-aptiva-gray text-gray-900 antialiased;
  }
  h1, h2, h3 {
    @apply font-semibold text-gray-800;
  }
}

/* --- 2) REUSABLE COMPONENT CLASSES ----------------------- */
@layer components {
  /* Primary button */
  .btn-primary {
    @apply inline-flex items-center gap-2
           rounded-xl bg-aptiva hover:bg-aptiva-dark
           text-white font-medium px-4 py-2
           shadow transition disabled:opacity-50;
  }

  /* Secondary outline button */
  .btn-outline {
    @apply inline-flex items-center gap-2
           rounded-xl border border-aptiva text-aptiva
           px-4 py-2 hover:bg-aptiva-light/10;
  }

  /* Card container */
  .card {
    @apply rounded-xl bg-white shadow p-6;
  }
}

/* --- 3) OPTIONAL UTILITIES -------------------------------- */
/* Example: .scrollbar-thin from tailwind-scrollbar plugin */
/* … */