/* Ported from figmaTest src/components/Button/Button.css at 88d9f27ba, 2026-09-29 by update-ai-tokens (three-way merge); alert states from 7d8cff7c1, 2026-10-16.
 * Local deviations are logged in css/cc2/FIGMA-DEVIATIONS.md. */

/* Button component — uses only --ao-* design tokens */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ao-spacing-3);
  padding: 0 var(--ao-spacing-5);
  min-height: var(--ao-spacing-8);
  font-family: var(--ao-font-body);
  font-size: var(--ao-font-fluid-xs);
  font-weight: var(--ao-font-semibold);
  line-height: var(--ao-leading-xs);
  border-radius: var(--ao-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--ao-transition-default),
              border-color var(--ao-transition-default),
              color var(--ao-transition-default),
              box-shadow var(--ao-transition-default);
  white-space: nowrap;
  user-select: none;
}

/* When a button is rendered as an <a>, suppress the global `a:hover`
   underline (base.css) — buttons never underline. `.btn:hover` (0,2,0)
   outranks `a:hover` (0,1,1). */
.btn:hover {
  text-decoration: none;
}

/* Lucide icons inside buttons default to 24×24 — override to 16×16 */
.btn [data-lucide] {
  width: var(--ao-icon-size-sm);
  height: var(--ao-icon-size-sm);
  flex-shrink: 0;
}

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

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

.btn--primary:hover {
  background-color: var(--ao-btn-primary-bg-hover);
  border-color: var(--ao-btn-primary-border-hover);
  color: var(--ao-btn-primary-text-hover);
}

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

.btn--primary:focus-visible {
  background-color: var(--ao-btn-primary-bg-hover);
  border: 2px solid var(--ao-surface-primary);
  box-shadow: 0 0 0 2px var(--ao-btn-primary-bg-hover);
  color: var(--ao-btn-primary-text-hover);
  outline: none;
}

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

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

.btn--secondary:hover {
  background-color: var(--ao-btn-secondary-bg-hover);
  border-color: var(--ao-btn-secondary-border-hover);
  color: var(--ao-btn-secondary-text-hover);
}

.btn--secondary:active {
  background-color: var(--ao-btn-secondary-bg-pressed);
  border-color: var(--ao-btn-secondary-border);
}

.btn--secondary:focus-visible {
  background-color: var(--ao-btn-secondary-bg-hover);
  border-color: var(--ao-surface-primary);
  box-shadow: 0 0 0 2px var(--ao-btn-secondary-border);
  color: var(--ao-btn-secondary-text-hover);
  outline: none;
}

/* ── Tertiary (ghost — transparent bg, no border) ──── */

.btn--tertiary {
  background-color: var(--ao-btn-tertiary-bg);
  color: var(--ao-btn-tertiary-text);
  border-color: var(--ao-btn-tertiary-border);
}

.btn--tertiary:hover {
  background-color: var(--ao-btn-tertiary-bg-hover);
  border-color: var(--ao-btn-tertiary-border-hover);
  color: var(--ao-btn-tertiary-text-hover);
}

.btn--tertiary:active {
  background-color: var(--ao-btn-tertiary-bg-pressed);
}

.btn--tertiary:focus-visible {
  background-color: var(--ao-btn-tertiary-bg-hover);
  box-shadow: 0 0 0 2px var(--ao-border-secondary);
  color: var(--ao-btn-tertiary-text-hover);
  outline: none;
}

/* ── Alert (destructive — solid red) ─────────────────── */

.btn--alert {
  background-color: var(--ao-surface-error);
  color: var(--ao-btn-primary-text);
  border-color: var(--ao-surface-error);
}

.btn--alert:hover {
  background-color: #641723; /* RedRadix/12 — primitive, approved (Mark 2026-10-16, TASK-555946) */
  border-color: #641723;     /* RedRadix/12 */
}

.btn--alert:active {
  background-color: #3b1219; /* RedRadix/13 — primitive, approved (Mark 2026-10-16) */
  border-color: #3b1219;     /* RedRadix/13 */
}

.btn--alert:focus-visible {
  background-color: #641723; /* RedRadix/12 — primitive, approved (Mark 2026-10-16, TASK-555946) */
  border: 2px solid var(--ao-surface-primary);
  box-shadow: 0 0 0 2px #641723; /* RedRadix/12 */
  outline: none;
}

/* ── Alert Outline ───────────────────────────────────── */
/* Default: outlined red. Hover/focus/pressed: flips to solid red (same as alert).
   Hover/focus RedRadix/12, pressed RedRadix/13 — darker than the default, like the primary button, so white
   text passes 4.5:1 (was Red/400 at 2.77:1; Figma variants rebound 2026-10-16). */

.btn--alert-outline {
  background-color: var(--ao-surface-primary);
  color: var(--ao-text-error);
  border-color: var(--ao-border-error);
}

.btn--alert-outline:hover {
  background-color: #641723; /* RedRadix/12 — primitive, approved (Mark 2026-10-16, TASK-555946) */
  border-color: #641723;
  color: var(--ao-btn-primary-text);
}

.btn--alert-outline:active {
  background-color: #3b1219; /* RedRadix/13 — primitive, approved (Mark 2026-10-16) */
  border-color: #3b1219;
  color: var(--ao-btn-primary-text);
}

.btn--alert-outline:focus-visible {
  background-color: #641723; /* RedRadix/12 — primitive, approved (Mark 2026-10-16, TASK-555946) */
  color: var(--ao-btn-primary-text);
  border: 2px solid var(--ao-surface-primary);
  box-shadow: 0 0 0 2px #641723; /* RedRadix/12 */
  outline: none;
}

/* ── Disabled state (all variants) ──────────────────── */

.btn:disabled,
.btn--disabled {
  background-color: var(--ao-btn-bg-disabled);
  border-color: var(--ao-btn-bg-disabled);
  color: var(--ao-btn-text-disabled);
  opacity: 0.8;
  cursor: not-allowed;
}

/* ── Size: small ─────────────────────────────────────── */

.btn--sm {
  padding: 0 var(--ao-spacing-4);
  min-height: var(--ao-spacing-7);
  font-size: var(--ao-font-fluid-xxs);
  border-radius: var(--ao-radius-md);
}

/* ── Size: extra-small ───────────────────────────────── */
/* Figma xs uses explicit vertical padding (spacing-2) rather than a fixed
   height token, a tighter gap, semibold weight (designer, 2026-09-28 — was medium), and the small radius. */

.btn--xs {
  gap: var(--ao-spacing-1);
  padding: var(--ao-spacing-2) var(--ao-spacing-3);
  min-height: auto;
  font-size: var(--ao-font-fluid-xxs);
  font-weight: var(--ao-font-semibold);
  line-height: var(--ao-leading-xs);
  border-radius: var(--ao-radius-md); /* designer, 2026-09-28 — was radius-sm */
}

.btn--xs [data-lucide] {
  width: var(--ao-icon-size-xs);
  height: var(--ao-icon-size-xs);
}

/* ── Icon-only variant (square button, no text) ──────── */

.btn--icon {
  padding: 0;
  width: var(--ao-spacing-8);
  min-height: var(--ao-spacing-8);
}

.btn--icon.btn--sm {
  width: var(--ao-spacing-7);
  min-height: var(--ao-spacing-7);
  padding: 0;
}

/* 24x24 square. Was `--ao-spacing-7` (32) until 2026-08-28, making this a 32x24 oblong — which
 * was correct for the Figma of the time. The designer has since squared the size off: every
 * `Icon Only=True, Size=xs` variant now measures 24x24, across all three Types and all five
 * States (Secondary `2926:3565` and its Hover/Focus/Pressed/Disabled siblings, likewise Primary
 * `2926:3559` and Tertiary `2926:3571`). `2926:3565` binds `--ao-spacing-6`, `--ao-icon-size-xs`
 * and `--ao-radius-sm` — the last two of which this file already had right.
 *
 * NOTE: this makes `.btn--icon.btn--2xs` below REDUNDANT — it is now byte-identical to this rule
 * (24x24, 12px icon, radius-sm, padding 0). `2xs` was invented on 2026-08-25 precisely because
 * Figma had no 24x24 icon size; Figma has now caught up, so the two class names describe one
 * size. Left in place deliberately rather than swept: `btn--2xs` has 161 usages across TableCard,
 * RoomCard, AttendeeCard and SeatingHeader, and its exact string is already baked into published
 * Code Connect snippets, so retiring it is a deliberate migration plus a re-publish, not a
 * tidy-up to fold into this change. Flagged for the designer. */
.btn--icon.btn--xs {
  width: var(--ao-spacing-6);
  min-height: var(--ao-spacing-6);
  padding: 0;
}

/* 24x24 icon-only. Added 2026-08-25 for Room Card (3470:84951), which places
   Button instances at 24x24 with a 12px icon — a size the set didn't cover
   (icon 40, +sm 32, +xs 32x24). ICON-ONLY: there is no text `.btn--2xs`,
   because Figma defines none. Radius is set here rather than inherited, since
   unlike --xs there is no base `.btn--2xs` rule to carry it. */
.btn--icon.btn--2xs {
  width: var(--ao-spacing-6);
  min-height: var(--ao-spacing-6);
  padding: 0;
  border-radius: var(--ao-radius-sm);
}

.btn--icon.btn--2xs [data-lucide],
.btn--icon.btn--2xs svg {
  width: var(--ao-icon-size-xs);
  height: var(--ao-icon-size-xs);
}