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

@layer base {
  body {
    @apply bg-sand-100 text-gray-800 antialiased;
  }

  h1, h2, h3 {
    @apply text-gray-900;
  }
}

@layer components {
  /* Layout */
  .store__container {
    @apply max-w-6xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  .page {
    @apply py-8 sm:py-12;
  }

  .page-narrow {
    @apply max-w-2xl mx-auto py-8 sm:py-12;
  }

  .page-title {
    @apply font-display text-3xl sm:text-4xl font-semibold tracking-tight text-gray-900;
  }

  .page-subtitle {
    @apply mt-2 text-gray-600;
  }

  .section-title {
    @apply text-lg font-semibold text-gray-900;
  }

  /* Surfaces */
  .card {
    @apply bg-white rounded-2xl shadow-card ring-1 ring-sand-200;
  }

  .card-body {
    @apply p-6 sm:p-8;
  }

  .divider {
    @apply border-t border-sand-200;
  }

  /* Buttons */
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-full px-5 py-2.5 text-sm font-semibold
           transition duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2
           disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer;
  }

  .btn-lg {
    @apply px-7 py-3.5 text-base;
  }

  .btn-block {
    @apply w-full;
  }

  .btn-primary {
    @apply btn bg-brand-600 text-white shadow-sm hover:bg-brand-700 focus-visible:ring-brand-500;
  }

  .btn-secondary {
    @apply btn bg-white text-gray-800 ring-1 ring-inset ring-sand-300 hover:bg-sand-50 focus-visible:ring-brand-500;
  }

  .btn-ghost {
    @apply btn text-gray-600 hover:text-gray-900 hover:bg-sand-200/60;
  }

  .btn-danger {
    @apply btn bg-white text-red-600 ring-1 ring-inset ring-red-200 hover:bg-red-50 focus-visible:ring-red-500;
  }

  /* Kept for existing views */
  .store__btn,
  .store__btn-blue {
    @apply btn-primary;
  }

  .store__btn-red {
    @apply btn bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-500;
  }

  /* Forms */
  .store__label {
    @apply block text-sm font-medium text-gray-700 mb-1.5;
  }

  .store__input {
    @apply block w-full rounded-xl border-sand-300 bg-white px-4 py-2.5 text-gray-900 shadow-sm
           placeholder:text-gray-400 focus:border-brand-500 focus:ring-brand-500;
  }

  .store__checkbox {
    @apply h-4 w-4 rounded border-sand-300 text-brand-600 focus:ring-brand-500;
  }

  .form-hint {
    @apply mt-1.5 text-sm text-gray-500;
  }

  /* Links */
  .link {
    @apply font-medium text-brand-600 hover:text-brand-700 underline-offset-4 hover:underline;
  }

  /* Badges */
  .badge {
    @apply inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-semibold;
  }

  .badge-green  { @apply badge bg-brand-50 text-brand-700 ring-1 ring-inset ring-brand-200; }
  .badge-blue   { @apply badge bg-sky-50 text-sky-700 ring-1 ring-inset ring-sky-200; }
  .badge-amber  { @apply badge bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-200; }
  .badge-red    { @apply badge bg-red-50 text-red-700 ring-1 ring-inset ring-red-200; }
  .badge-gray   { @apply badge bg-sand-100 text-gray-700 ring-1 ring-inset ring-sand-300; }

  /* Navigation */
  .nav-link {
    @apply rounded-full px-3 py-2 text-sm font-medium text-gray-600 transition hover:text-gray-900 hover:bg-sand-100;
  }

  .nav-link-active {
    @apply text-brand-700 bg-brand-50 hover:bg-brand-50 hover:text-brand-700;
  }

  /* Flash */
  .alert {
    @apply flex items-start gap-3 rounded-xl px-4 py-3 text-sm font-medium ring-1 ring-inset;
  }

  .alert-notice { @apply alert bg-brand-50 text-brand-800 ring-brand-200; }
  .alert-error  { @apply alert bg-red-50 text-red-800 ring-red-200; }

  /* Empty states */
  .empty-state {
    @apply flex flex-col items-center text-center py-12 px-6;
  }

  .empty-state-icon {
    @apply mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-sand-100 text-brand-600;
  }
}