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

@layer base {
  html { @apply antialiased; }

  body { @apply bg-ink-50 text-ink-900; }

  /* Nielsen #1, visibility of system status: keyboard users need to see where
     they are as clearly as mouse users do. */
  :focus-visible {
    @apply outline-none ring-2 ring-accent-500 ring-offset-2 ring-offset-ink-50 rounded-sm;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }
}

@layer components {
  /* ---- buttons --------------------------------------------------------- */
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-md px-4 py-2
           text-sm font-medium transition-colors cursor-pointer
           disabled:opacity-50 disabled:cursor-not-allowed;
  }
  .btn-primary   { @apply btn bg-accent-700 text-white hover:bg-accent-800; }
  .btn-secondary { @apply btn bg-white text-ink-700 border border-ink-200 hover:bg-ink-100; }
  .btn-ghost     { @apply btn text-ink-600 hover:bg-ink-100; }
  .btn-danger    { @apply btn bg-white text-red-700 border border-red-200 hover:bg-red-50; }
  .btn-sm        { @apply px-3 py-1.5 text-xs; }

  /* ---- surfaces -------------------------------------------------------- */
  .card        { @apply bg-white border border-ink-200 rounded-lg; }
  .card-header { @apply flex items-center justify-between gap-4 px-5 py-3 border-b border-ink-200; }
  .card-title  { @apply text-sm font-semibold text-ink-900; }
  .card-body   { @apply px-5 py-4; }

  /* ---- forms ----------------------------------------------------------- */
  .label { @apply block text-sm font-medium text-ink-700 mb-1; }

  .input, .textarea {
    @apply block w-full rounded-md border-ink-300 text-ink-900 placeholder-ink-400
           shadow-sm focus:border-accent-500 focus:ring-accent-500 sm:text-sm;
  }

  /* Nielsen #10, help: a hint attached to the field beats documentation
     somewhere else entirely. */
  .hint  { @apply mt-1 text-xs text-ink-500; }
  .field { @apply mb-4; }

  /* ---- status ---------------------------------------------------------- */
  .badge         { @apply inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap; }
  .badge-neutral { @apply badge bg-ink-100 text-ink-700; }
  .badge-accent  { @apply badge bg-accent-100 text-accent-800; }
  .badge-pending { @apply badge bg-amber-100 text-amber-800; }
  .badge-overdue { @apply badge bg-red-100 text-red-800; }

  .eyebrow { @apply text-xs font-semibold uppercase tracking-wider text-accent-700; }
  .link    { @apply text-accent-700 underline underline-offset-2 hover:text-accent-900; }

  /* ---- empty states (Nielsen #10) --------------------------------------- */
  .empty       { @apply text-center py-8 px-4 text-sm text-ink-500; }
  .empty-title { @apply block font-medium text-ink-700 mb-1; }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */