/* Buttons — chunky toys with a hard bottom edge. Tokens only.
   <button class="btn btn--primary"><svg class="icon" aria-hidden="true"><use href="#play"/></svg>Play</button>
   Default = white with an ink edge. Variants: --primary (lime, one per
   screen) · --candy + a .candy-* scope · --ghost · --danger (white text).
   Sizes: --lg (56 px, edge-lg) · --icon (48 square, needs aria-label) · --block.
   Group with .btn-row. Pressed sinks by the edge; hover lifts 1 px.
   Text on every fill is --ink-900; white only on --danger. */

.btn {
  --btn-bg: var(--c-fill);
  --btn-fg: var(--fg);
  --btn-edge-c: var(--c-shade);
  --btn-edge: var(--edge);
  --btn-lift: 0px;
  --btn-ring: 0 0 0 0 transparent;   /* :focus-visible sets it; every state below keeps it */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control);
  min-width: var(--control);
  margin-bottom: var(--btn-edge);   /* reserve room for the edge so rows don't collide */
  padding: 0 var(--space-6);
  border: var(--bw) solid var(--ink-900);
  border-radius: var(--radius-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: inset 0 1px 0 var(--sheen), inset 0 -2px 0 var(--hover), 0 var(--btn-edge) 0 var(--btn-edge-c), var(--btn-ring);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  font-weight: var(--fw-black);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transform: translateY(calc(-1 * var(--btn-lift)));
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}
.btn .icon { width: var(--icon-lg); height: var(--icon-lg); margin-inline-start: calc(-1 * var(--space-1)); }
.btn--icon .icon { margin: 0; }

@media (hover: hover) {
  .btn:hover:not(:disabled):not([aria-disabled="true"]) {
    --btn-lift: 1px;
    box-shadow: inset 0 1px 0 var(--sheen), inset 0 -2px 0 var(--hover), 0 calc(var(--btn-edge) + 1px) 0 var(--btn-edge-c), var(--btn-ring);
  }
}
.btn:active:not(:disabled):not([aria-disabled="true"]),
.btn.is-pressed {
  transform: translateY(var(--btn-edge));
  box-shadow: inset 0 1px 0 var(--sheen), inset 0 0 0 99px var(--press), 0 0 0 var(--btn-edge-c), var(--btn-ring);
}
/* The ring is a variable, so hover, press and the variants keep it */
.btn:focus-visible { --btn-ring: var(--focus-ring); }

/* ── Variants ───────────────────────────────────────────── */
.btn--primary {
  --c-fill: var(--primary);
  --c-shade: var(--primary-shade);
  --c-ink: var(--lime-ink);
  --btn-fg: var(--fg-on-primary);
}
.btn--candy { --btn-fg: var(--fg-on-candy); }
.btn--ghost {
  --btn-bg: transparent;
  --btn-edge: 0px;
  border-color: transparent;
  box-shadow: var(--btn-ring);
  margin-bottom: 0;
}
@media (hover: hover) {
  .btn--ghost:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--hover); box-shadow: var(--btn-ring); --btn-lift: 0px; }
}
.btn--ghost:active:not(:disabled):not([aria-disabled="true"]) { transform: none; background: var(--press); box-shadow: var(--btn-ring); }
.btn--danger {
  --c-fill: var(--danger);
  --c-shade: var(--danger-shade);
  --btn-fg: var(--fg-on-danger);
  box-shadow: inset 0 1px 0 var(--sheen-faint), 0 var(--btn-edge) 0 var(--btn-edge-c), var(--btn-ring);
}
/* Quiet destructive: a ghost button with danger text */
.btn--ghost.btn--danger { --btn-fg: var(--danger); background: transparent; box-shadow: var(--btn-ring); }
@media (hover: hover) { .btn--ghost.btn--danger:hover:not(:disabled) { background: var(--danger-tint); } }

/* On a navy surface (HUD, scrim): use the dark focus ring */
.on-dark .btn:focus-visible, .btn--on-dark:focus-visible { --btn-ring: var(--focus-ring-dark); }

/* ── Sizes ──────────────────────────────────────────────── */
.btn--lg {
  --btn-edge: var(--edge-lg);
  min-height: var(--control-lg);
  padding: 0 var(--space-7);
  font-size: var(--fs-lg);
}
.btn--icon { width: var(--control); padding: 0; }
.btn--lg.btn--icon { width: var(--control-lg); }
.btn--block { display: flex; width: 100%; }
.btn--round { border-radius: var(--radius-pill); }

/* ── Disabled ───────────────────────────────────────────── */
.btn:disabled,
.btn[aria-disabled="true"] {
  --btn-bg: var(--soda-200);
  --btn-fg: var(--ink-500);
  --btn-edge-c: var(--ink-300);
  border-color: var(--ink-300);
  box-shadow: 0 var(--btn-edge) 0 var(--ink-300), var(--btn-ring);   /* aria-disabled stays focusable */
  cursor: not-allowed;
}
.btn--ghost:disabled { background: transparent; box-shadow: none; }

/* ── Group ──────────────────────────────────────────────── */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-start; }
.btn-row--stack { flex-direction: column; align-items: stretch; }
.btn-row--end { justify-content: flex-end; }