/* ============================================================================
   BUTTONS — the ONE canonical button family for NDR (design system, t304).
   Single source of truth for every `.btn-*` class; the Button::Component
   renders these. Consolidated here out of the monolithic tailwind/application.css
   @layer components block. No visual change to the existing variants.

   Geometry (shared by every variant via the grouped selector below):
     rounded-md · px-4 py-2.5 · min-h-11 (44px touch target) · text-sm font-semibold
     · inline-flex centered · gap-x-2 (icon+label) · cursor-pointer · Title Case.
   Sizes: .btn-sm (compact) · default (44px) · .btn-lg (prominent).
   States: hover (per variant) · disabled (dimmed, no-cursor) · loading
     (Button::Component adds aria-busy + a spinner; the button is disabled).

   NOTE (inventory finding C): a GLOBAL [type="submit"] rule in
   tailwind/application.css also fills every submit button tan-600. That rule is
   kept (removing it would restyle the whole app); Button::Component always emits
   an explicit .btn-* so intent never rides on that default.

   Tailwind v4 note: @apply only works with UTILITIES, not with other custom
   component classes — so each variant carries its OWN full utility set (rather
   than @apply btn-base). The SHARED geometry is instead expressed once via the
   grouped selector list below, and .btn-base is a standalone unstyled-variant
   for callers who want geometry + Title Case with no colour of their own.
   ============================================================================ */

    /* SHARED GEOMETRY — one declaration for every button variant + .btn-base. */
    .btn-base,
    .btn-primary,
    .btn-brand,
    .btn-secondary,
    .btn-tertiary,
    .btn-danger,
    .btn-outline,
    .btn-ghost,
    .btn-disabled,
    .btn-temporary,
    .btn-social {
        @apply rounded-md px-4 py-2.5 min-h-11 inline-flex items-center justify-center gap-x-2 text-sm font-semibold shadow-xs cursor-pointer capitalize;
    }

    /* Sizes (layer AFTER a variant to override the default md geometry). */
    .btn-sm { @apply px-3 py-1.5 min-h-9 text-xs gap-x-1.5; }
    .btn-lg { @apply px-5 py-3 min-h-12 text-base gap-x-2.5; }

    /* PRIMARY — the app's current default primary: solid tan-600. (Recoloring
       to brand-green is a Mark decision, see inventory finding B — .btn-brand
       below is the brand-green option.) */
    .btn-primary {
        @apply bg-tan-600 text-gray-900 hover:bg-tan-700 hover:text-white focus-visible:outline-tan-600;
        @apply disabled:bg-tan-400 disabled:cursor-not-allowed;
    }

    /* BRAND — solid brand-green primary (#2F5848), the NDR brand-primary colour. */
    .btn-brand {
        @apply bg-brand-green text-white hover:bg-brand-green-600 focus-visible:outline-brand-green;
        @apply disabled:opacity-50 disabled:cursor-not-allowed;
    }

    /* SECONDARY — white fill, tan outline + tan label; subordinate to primary. */
    .btn-secondary {
        @apply bg-white text-tan-700 ring-1 ring-inset ring-tan-600 hover:bg-tan-50 focus-visible:outline-tan-600;
        @apply disabled:opacity-50 disabled:cursor-not-allowed;
    }

    /* TERTIARY — a quiet text-button: transparent, tan label, no ring/shadow. */
    .btn-tertiary {
        @apply bg-transparent text-tan-700 shadow-none hover:bg-tan-50 focus-visible:outline-tan-600;
        @apply disabled:opacity-50 disabled:cursor-not-allowed;
    }

    /* DANGER — solid red for destructive actions (destructive-emphasis). */
    .btn-danger {
        @apply bg-red-600 text-white hover:bg-red-700 focus-visible:outline-red-600;
        @apply disabled:opacity-50 disabled:cursor-not-allowed;
    }

    /* OUTLINE — neutral white + gray ring (used widely for secondary rows). */
    .btn-outline {
        @apply bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-gray-400;
    }

    /* OUTLINE-ACTIVE — a selected quick-filter (brand-green-when-active), same
       signal as .chip-toggle-active but rectangular (.btn-outline geometry). */
    .btn-outline-active {
        @apply bg-brand-green text-white ring-brand-green hover:bg-brand-green hover:text-white;
    }

    /* GHOST — transparent, gray label; fits into a row of buttons as a link. */
    .btn-ghost {
        @apply bg-transparent hover:bg-transparent shadow-none text-gray-800;
    }

    /* DISABLED — a statically-disabled look (kept for API compatibility; prefer
       the Button::Component `disabled:`/`loading:` states). */
    .btn-disabled {
        @apply bg-tan-50 text-tan-600 cursor-not-allowed;
    }

    /* TEMPORARY — an action pending completion. */
    .btn-temporary {
        @apply bg-red-50 text-black ring-1 ring-red-400 cursor-not-allowed hover:bg-red-100;
    }

    /* SOCIAL — brand-mandated black third-party-auth pill (Google/Apple). NOT
       Title-Cased (provider names render exactly as branded). */
    .btn-social {
        @apply w-full bg-black text-white normal-case hover:bg-gray-900 focus-visible:outline-gray-900;
    }