/**
 * Sena Design System v1.0
 * Button Components
 *
 * Requires: colors.css + theme.css
 *
 * Variants:
 *   Types  → .btn-primary  | .btn-secondary  | .btn-ghost
 *   Sizes  → .btn-lg (default) | .btn-md | .btn-sm
 */

/* ─── Font Awesome ────────────────────────────────────────────────────────── */
/* @font-face declarations removed — now provided by vendored FA CSS:
   vendor/fontawesome/css/fontawesome.css + solid.css + regular.css + duotone.css */

/* ─── Base ────────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--ff-text);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.btn:focus-visible {
  outline: 2px solid var(--stroke-accent);
  outline-offset: 2px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  pointer-events: none;
  /* Visibly grayed, not just unresponsive: without this a disabled button was
     indistinguishable from a live one until the click did nothing. Opacity
     rather than a color swap so every variant grays the same way. */
  opacity: 0.45;
}

/* ─── Sizes ───────────────────────────────────────────────────────────────── */

.btn-lg,
.btn:not(.btn-md):not(.btn-sm) {
  padding: var(--spacing-16);
  border-radius: var(--spacing-12);
}

.btn-md {
  padding: var(--spacing-12);
  border-radius: var(--spacing-12);
  font-size: var(--text-sm);
}

.btn-sm {
  padding: var(--spacing-6) var(--spacing-8);
  border-radius: var(--spacing-8);
  font-size: var(--text-xs);
  gap: var(--spacing-6);
}

/* ─── Icons ───────────────────────────────────────────────────────────────── */

.btn-icon {
  /* Font comes from the required `fa-solid fa-NAME` classes on this element. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.btn-lg .btn-icon,
.btn:not(.btn-md):not(.btn-sm) .btn-icon,
.btn-md .btn-icon {
  width: 17px;
  height: 17px;
  font-size: 14px;
}

.btn-sm .btn-icon {
  width: 13px;
  height: 13px;
  font-size: 10px;
}

/* ─── Standalone Icons ────────────────────────────────────────────────────── */
/* Legacy ligature-based .fa / .fa-regular / .fa-duotone rules removed.       */
/* Icons now use FA's standard class+codepoint CSS from vendor/fontawesome/.  */
/* Usage: <i class="fa-solid fa-house" aria-hidden="true"></i>                */
/*        <i class="fa-regular fa-bell" aria-hidden="true"></i>               */
/*        <i class="fa-duotone fa-grid-2" aria-hidden="true"></i>             */

/* ─── Duotone theming ─────────────────────────────────────────────────────── */
/* The pre-ligature prototype rendered every duotone icon monochrome: both
   layers in one ink, the secondary layer at 0.4 opacity for depth (the old
   --_duotone-color system, which nothing in the codebase ever overrode). FA's
   class system draws the two layers on ::before / ::after and themes them with
   these vars; default them to keep that look.

   Both layers inherit currentColor, so a host tints the whole icon just by
   setting `color` — the sidebar nav icon is --fg-secondary, a page-header icon
   is --fg-secondary, a live report chip is --fg-accent, and each duotone
   follows. The opacity is pinned here rather than left to FA's default so a
   package bump can't shift the secondary layer's depth.

   For a genuine two-colour icon, set --fa-primary-color / --fa-secondary-color
   on the host; add .fa-swap-opacity to flip which layer reads faint. */
.fa-duotone {
  --fa-primary-color: currentColor;
  --fa-secondary-color: currentColor;
  --fa-primary-opacity: 1;
  --fa-secondary-opacity: 0.4;
}

/* ─── Primary ─────────────────────────────────────────────────────────────── */

.btn-primary {
  background-color: var(--bg-accent);
  border-color: var(--stroke-accent);
  color: var(--text-on-accent);
}

.btn-primary .btn-icon {
  color: var(--fg-on-accent);
}

.btn-primary:hover {
  background-color: var(--bg-accent-hover);
}

.btn-primary:active {
  background-color: var(--bg-accent-pressed);
}

.btn-primary:disabled,
.btn-primary[aria-disabled="true"] {
  background-color: var(--bg-secondary);
  border-color: var(--stroke-secondary);
  color: var(--text-disabled);
}

.btn-primary:disabled .btn-icon,
.btn-primary[aria-disabled="true"] .btn-icon {
  color: var(--fg-disabled);
}

/* ─── Danger ──────────────────────────────────────────────────────────────── */
/* The confirm button of a destructive action (Delete in the sidebar's delete
   dialog). Red fill from --fg-error (red-500 in light, red-300 in dark) with
   the contrast text, which is white in light and dark ink in dark, so it
   reads on both reds. Hover and press deepen it toward the text colour, the
   way the primary button steps through its accent shades. */
.btn-danger {
  background-color: var(--fg-error);
  border-color: var(--fg-error);
  color: var(--text-contrast);
}

.btn-danger .btn-icon {
  color: var(--text-contrast);
}

.btn-danger:hover {
  background-color: color-mix(in srgb, var(--fg-error) 88%, var(--text-primary));
}

.btn-danger:active {
  background-color: color-mix(in srgb, var(--fg-error) 78%, var(--text-primary));
}

.btn-danger:disabled,
.btn-danger[aria-disabled="true"] {
  background-color: var(--bg-secondary);
  border-color: var(--stroke-secondary);
  color: var(--text-disabled);
}

/* ─── Agent ───────────────────────────────────────────────────────────────── */
/* The selected agent's pill, in that agent's own colour (DES-20): the
   component sets --agent to the agent's token (--agent-<key>). A tint, not a
   fill: no single text colour reads on all eleven hues, so the label is the
   hue pulled well toward the text colour and the ground is the hue half
   mixed into the card, which reads in both themes. Stronger than the circles'
   28%: it must stand out from the unselected pills, which are mint.
   Falls back to the accent. */
.btn-agent {
  background-color: color-mix(in srgb, var(--agent, var(--fg-accent)) 50%, var(--bg-card));
  border-color: color-mix(in srgb, var(--agent, var(--fg-accent)) 85%, var(--text-primary));
  color: color-mix(in srgb, var(--agent, var(--fg-accent)) 30%, var(--text-primary));
}

.btn-agent .btn-icon {
  color: color-mix(in srgb, var(--agent, var(--fg-accent)) 45%, var(--text-primary));
}

.btn-agent:hover {
  background-color: color-mix(in srgb, var(--agent, var(--fg-accent)) 60%, var(--bg-card));
}

/* ─── Secondary ───────────────────────────────────────────────────────────── */

.btn-secondary {
  background-color: var(--bg-accent-light);
  border-color: var(--stroke-secondary);
  color: var(--text-secondary);
}

.btn-secondary .btn-icon {
  color: var(--fg-secondary);
}

.btn-secondary:hover {
  background-color: var(--bg-accent-light-hover);
  border-color: var(--stroke-primary);
}

.btn-secondary:active {
  background-color: var(--bg-accent-light-pressed);
  border-color: var(--stroke-primary);
}

.btn-secondary:disabled,
.btn-secondary[aria-disabled="true"] {
  background-color: var(--bg-accent-light-pressed);
  border-color: var(--stroke-secondary);
  color: var(--text-disabled);
}

.btn-secondary:disabled .btn-icon,
.btn-secondary[aria-disabled="true"] .btn-icon {
  color: var(--fg-disabled);
}

/* Dark mode punishes a disabled button twice: the ink swaps to the disabled
   token (concrete-600, a MID tone that needs a light surface under it) AND the
   whole button drops to 0.45 opacity, and the two together blend the label
   into the fill. Keep the wash as the "grayed" signal but hand the label a
   brighter ink so it survives it; light mode keeps the original pair. */
[data-theme="dark"] .btn:disabled,
[data-theme="dark"] .btn[aria-disabled="true"] {
  opacity: 0.55;
}

[data-theme="dark"] .btn-primary:disabled,
[data-theme="dark"] .btn-primary[aria-disabled="true"],
[data-theme="dark"] .btn-secondary:disabled,
[data-theme="dark"] .btn-secondary[aria-disabled="true"] {
  color: var(--text-primary);
}

[data-theme="dark"] .btn-primary:disabled .btn-icon,
[data-theme="dark"] .btn-primary[aria-disabled="true"] .btn-icon,
[data-theme="dark"] .btn-secondary:disabled .btn-icon,
[data-theme="dark"] .btn-secondary[aria-disabled="true"] .btn-icon {
  color: var(--fg-secondary);
}

/* ─── Ghost ───────────────────────────────────────────────────────────────── */

.btn-ghost {
  background-color: transparent;
  border-color: var(--stroke-primary);
  color: var(--text-secondary);
}

.btn-ghost .btn-icon {
  color: var(--fg-secondary);
}

.btn-ghost:hover {
  background-color: var(--bg-secondary);
  border-color: var(--stroke-primary);
}

.btn-ghost:active {
  background-color: var(--bg-secondary);
  border-color: var(--stroke-primary);
}

.btn-ghost:disabled,
.btn-ghost[aria-disabled="true"] {
  background-color: transparent;
  border-color: var(--stroke-secondary);
  color: var(--text-disabled);
}

.btn-ghost:disabled .btn-icon,
.btn-ghost[aria-disabled="true"] .btn-icon {
  color: var(--fg-disabled);
}