/* ============================================================================
   f(x) → NATURE DS — Buttons & Actions  (section [02])
   Components: Button (.fd-btn), Button Group (.fd-btn-group), Toggle (.fd-toggle),
   Toggle Group (.fd-toggle-group), Badge (.fd-badge), Kbd (.fd-kbd).

   Consumes ONLY tokens from tokens.css. Works in both dark + light themes.
   Doc chrome (.fd-doc, .fd-preview, .fd-api) lives in styles/docs.css — not here.
   ============================================================================ */

/* --- Copy button (minimal, token-based; identical across bundles) ---- */
.fd-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--foreground-subtle);
  background: var(--surface-2);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}
.fd-copy-btn:hover {
  color: var(--foreground);
  border-color: var(--border-strong);
  background: var(--surface-3);
}
.fd-copy-btn.is-copied {
  color: var(--accent-text);
  border-color: var(--accent-border);
}

/* ============================================================================
   1 · BUTTON — .fd-btn
   ============================================================================ */
.fd-btn {
  --_btn-pad-x: var(--space-4);
  --_btn-pad-y: var(--space-2);
  --_btn-font: var(--text-sm);
  --_btn-gap: var(--space-2);
  --_btn-icon: 1em;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--_btn-gap);
  padding: var(--_btn-pad-y) var(--_btn-pad-x);
  font-family: var(--font-mono);
  font-size: var(--_btn-font);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: var(--leading-none);
  white-space: nowrap;
  color: var(--foreground);
  background: transparent;
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  transition: color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}
.fd-btn:focus-visible {
  outline: var(--border-width-thick) solid var(--accent);
  outline-offset: 2px;
}

/* Icon inside buttons */
.fd-btn svg {
  width: var(--_btn-icon);
  height: var(--_btn-icon);
  flex: none;
}

/* --- Sizes ----------------------------------------------------------- */
.fd-btn--sm {
  --_btn-pad-x: var(--space-3);
  --_btn-pad-y: var(--space-1);
  --_btn-font: var(--text-2xs);
  --_btn-gap: var(--space-1);
}
.fd-btn--md {
  --_btn-pad-x: var(--space-4);
  --_btn-pad-y: var(--space-2);
  --_btn-font: var(--text-sm);
}
.fd-btn--lg {
  --_btn-pad-x: var(--space-6);
  --_btn-pad-y: var(--space-3);
  --_btn-font: var(--text-base);
  --_btn-gap: var(--space-3);
}

/* --- Variant: primary (lime fill, hard offset shadow on hover) ------- */
.fd-btn--primary {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: var(--weight-semibold);
}
.fd-btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--foreground);
  box-shadow: var(--shadow-hard);
  transform: translate(-2px, -2px);
}
.fd-btn--primary:active {
  background: var(--accent-active);
  box-shadow: none;
  transform: translate(0, 0);
}

/* --- Variant: secondary (surface fill + border) --------------------- */
.fd-btn--secondary {
  color: var(--foreground);
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.fd-btn--secondary:hover {
  background: var(--surface-3);
  border-color: var(--foreground-subtle);
}
.fd-btn--secondary:active { background: var(--surface); }

/* --- Variant: ghost (transparent, hover surface) -------------------- */
.fd-btn--ghost {
  color: var(--foreground-muted);
  background: transparent;
  border-color: transparent;
}
.fd-btn--ghost:hover {
  color: var(--foreground);
  background: var(--surface-2);
}
.fd-btn--ghost:active { background: var(--surface-3); }

/* --- Variant: outline (transparent + strong border) ----------------- */
.fd-btn--outline {
  color: var(--foreground);
  background: transparent;
  border-color: var(--border-strong);
}
.fd-btn--outline:hover {
  border-color: var(--accent);
  color: var(--accent-text);
  box-shadow: var(--shadow-hard-border);
  transform: translate(-2px, -2px);
}
.fd-btn--outline:active {
  box-shadow: none;
  transform: translate(0, 0);
}

/* --- Variant: danger (error) ---------------------------------------- */
.fd-btn--danger {
  color: var(--error-text);
  background: var(--error-muted);
  border-color: var(--error);
}
.fd-btn--danger:hover {
  color: var(--on-accent);
  background: var(--error);
  border-color: var(--error);
}
.fd-btn--danger:active { filter: brightness(0.92); }

/* --- Modifier: icon-only -------------------------------------------- */
.fd-btn--icon {
  --_btn-pad-x: var(--_btn-pad-y);
  aspect-ratio: 1 / 1;
  padding: var(--_btn-pad-y);
}
.fd-btn--icon.fd-btn--sm { --_btn-icon: 0.95em; }
.fd-btn--icon.fd-btn--lg { --_btn-icon: 1.05em; }

/* --- Modifier: full width ------------------------------------------- */
.fd-btn--block { display: flex; width: 100%; }

/* --- State: disabled ------------------------------------------------- */
.fd-btn:disabled,
.fd-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* --- State: loading (spinner, width preserved) ---------------------- */
.fd-btn.is-loading {
  cursor: progress;
  color: transparent;
}
.fd-btn.is-loading > * { visibility: hidden; }
.fd-btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  margin: -0.5em 0 0 -0.5em;
  border: var(--border-width-thick) solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-full);
  color: var(--foreground);
  visibility: visible;
  animation: fd-btn-spin 0.6s linear infinite;
}
.fd-btn--primary.is-loading::after { color: var(--on-accent); }
@keyframes fd-btn-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================================
   2 · BUTTON GROUP — .fd-btn-group
   Segmented row: buttons share borders (collapse the seam), sharp inner corners,
   only the outer ends keep rounded radius. Vertical + attached toolbar variants.
   ============================================================================ */
.fd-btn-group {
  display: inline-flex;
  align-items: stretch;
  vertical-align: middle;
}
/* Collapse the seam between adjacent buttons into a single hairline. */
.fd-btn-group > .fd-btn:not(:first-child) {
  margin-left: calc(var(--border-width) * -1);
}
/* Square the inner corners; only the ends stay rounded. */
.fd-btn-group > .fd-btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.fd-btn-group > .fd-btn:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.fd-btn-group > .fd-btn:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
/* Hover/focus pulls the active segment forward so its full border is visible. */
.fd-btn-group > .fd-btn:hover,
.fd-btn-group > .fd-btn:focus-visible,
.fd-btn-group > .fd-btn.is-active {
  z-index: 1;
}
/* The active segment in a segmented control reads as accent. */
.fd-btn-group > .fd-btn.is-active {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}

/* --- Vertical orientation ------------------------------------------- */
.fd-btn-group--vertical {
  flex-direction: column;
  align-items: stretch;
}
.fd-btn-group--vertical > .fd-btn:not(:first-child) {
  margin-left: 0;
  margin-top: calc(var(--border-width) * -1);
}
.fd-btn-group--vertical > .fd-btn:first-child {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.fd-btn-group--vertical > .fd-btn:last-child {
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.fd-btn-group--vertical > .fd-btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}

/* ============================================================================
   3 · TOGGLE — .fd-toggle (a single pressable, e.g. Bold/Italic)
   Square-ish ghost button that latches on. Shares the brutalist hairline frame.
   Driven by [data-fd-toggle] aria-pressed + .is-on (see TOGGLE GROUP in main.js).
   ============================================================================ */
.fd-toggle {
  --_tg-pad: var(--space-2);
  --_tg-icon: 1em;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 2.25rem;
  padding: var(--_tg-pad);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: var(--leading-none);
  color: var(--foreground-muted);
  background: transparent;
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  transition: color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}
.fd-toggle svg {
  width: var(--_tg-icon);
  height: var(--_tg-icon);
  flex: none;
}
.fd-toggle:hover {
  color: var(--foreground);
  background: var(--surface-2);
  border-color: var(--foreground-subtle);
}
.fd-toggle:focus-visible {
  outline: var(--border-width-thick) solid var(--accent);
  outline-offset: 2px;
}
/* Pressed / on — accent fill, brutalist latch. */
.fd-toggle[aria-pressed="true"],
.fd-toggle.is-on {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}
.fd-toggle[aria-pressed="true"]:hover,
.fd-toggle.is-on:hover {
  background: var(--accent-hover);
  color: var(--on-accent);
}
.fd-toggle:disabled,
.fd-toggle[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Sizes */
.fd-toggle--sm {
  --_tg-pad: var(--space-1);
  font-size: var(--text-2xs);
  min-width: 1.85rem;
}
.fd-toggle--lg {
  --_tg-pad: var(--space-3);
  font-size: var(--text-base);
  min-width: 2.75rem;
}

/* Typographic styling cues so Bold/Italic toggles read at a glance. */
.fd-toggle--bold { font-weight: var(--weight-black); }
.fd-toggle--italic { font-style: italic; }
.fd-toggle--underline { text-decoration: underline; text-underline-offset: 0.2em; }

/* Icon-only toggle — square footprint, no inline gap. */
.fd-toggle--icon { gap: 0; aspect-ratio: 1 / 1; padding-inline: var(--_tg-pad); }
.fd-toggle--icon svg { width: 1.15em; height: 1.15em; }

/* ============================================================================
   4 · TOGGLE GROUP — .fd-toggle-group (single + multiple)
   A segmented cluster of .fd-toggle. Like the button group, members share a
   single hairline seam; outer ends keep the radius. JS in main.js handles
   single (radio-like) vs multiple selection via data-fd-type.
   ============================================================================ */
.fd-toggle-group {
  display: inline-flex;
  align-items: stretch;
  vertical-align: middle;
}
.fd-toggle-group > .fd-toggle:not(:first-child) {
  margin-left: calc(var(--border-width) * -1);
}
.fd-toggle-group > .fd-toggle:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.fd-toggle-group > .fd-toggle:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.fd-toggle-group > .fd-toggle:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
/* Active/hover/focus pull forward so the full accent border shows over the seam. */
.fd-toggle-group > .fd-toggle:hover,
.fd-toggle-group > .fd-toggle:focus-visible,
.fd-toggle-group > .fd-toggle[aria-pressed="true"],
.fd-toggle-group > .fd-toggle.is-on {
  z-index: 1;
}

/* ============================================================================
   5 · BADGE — .fd-badge
   ============================================================================ */
.fd-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.2em var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: var(--leading-snug);
  color: var(--foreground-muted);
  background: var(--surface-2);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* --- Sizes ----------------------------------------------------------- */
.fd-badge--sm {
  font-size: 0.625rem;
  padding: 0.15em var(--space-1);
  gap: var(--space-1);
}
.fd-badge--md {
  font-size: var(--text-2xs);
  padding: 0.25em var(--space-2);
}

/* --- Variants -------------------------------------------------------- */
.fd-badge--accent {
  color: var(--accent-text);
  background: var(--accent-muted);
  border-color: var(--accent-border);
}
.fd-badge--success {
  color: var(--success-text);
  background: var(--success-muted);
  border-color: var(--success);
}
.fd-badge--warning {
  color: var(--warning-text);
  background: var(--warning-muted);
  border-color: var(--warning);
}
.fd-badge--error {
  color: var(--error-text);
  background: var(--error-muted);
  border-color: var(--error);
}
.fd-badge--outline {
  color: var(--foreground);
  background: transparent;
  border-color: var(--border-strong);
}

/* --- Dot variant (leading status dot) ------------------------------- */
.fd-badge__dot {
  width: 0.5em;
  height: 0.5em;
  flex: none;
  border-radius: var(--radius-full);
  background: currentColor;
}
.fd-badge--dot { padding-left: var(--space-2); }

/* ============================================================================
   6 · KBD — .fd-kbd (keyboard key caps)
   ============================================================================ */
.fd-kbd {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
}
.fd-kbd kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.65em;
  padding: 0.2em 0.45em;
  font-family: var(--font-mono);
  font-size: inherit;
  font-weight: var(--weight-medium);
  line-height: var(--leading-none);
  color: var(--foreground);
  background: var(--surface-2);
  border: var(--border-width) solid var(--border-strong);
  border-bottom-width: var(--border-width-thick);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.fd-kbd__plus {
  color: var(--foreground-faint);
  font-size: 0.85em;
}
.fd-kbd--accent kbd {
  color: var(--accent-text);
  border-color: var(--accent-border);
}

/* ============================================================================
   7 · MOTION SAFETY
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .fd-btn,
  .fd-toggle {
    transition: none;
  }
  .fd-btn.is-loading::after {
    animation: none;
  }
}