/* ============================================================
   COMPONENT · BUTTON
   Mechanical key. Default = chrome bezel cap with engraved plaque
   label. Variants saturate intentionally (Birren: signal only).
   ============================================================ */

.c-button {
  --btn-bg:     var(--color-bezel);
  --btn-bg-hi:  var(--color-bezel-light);
  --btn-fg:     var(--color-text-strong);
  --btn-glow:   transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  min-height: 2.5rem;

  font-family: var(--font-plaque);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--btn-fg);

  background:
    linear-gradient(180deg, var(--btn-bg-hi) 0%, var(--btn-bg) 50%, var(--color-bezel-dark) 100%);
  border: 1px solid var(--color-bezel-dark);
  border-radius: var(--radius-xs);
  box-shadow:
    var(--seam-embossed),
    0 2px 0 0 var(--c-bezel-shadow),
    0 3px 6px rgba(0,0,0,0.4),
    0 0 0 0 var(--btn-glow);

  cursor: pointer;
  user-select: none;
  transition:
    transform var(--dur-instant) var(--ease-snap),
    box-shadow var(--dur-instant) var(--ease-snap),
    filter var(--dur-instant) var(--ease-snap);
}

.c-button:hover { filter: brightness(1.1); }

.c-button:active {
  transform: translateY(2px);
  box-shadow:
    var(--seam-engraved),
    0 0 0 0 var(--c-bezel-shadow),
    inset 0 2px 4px rgba(0,0,0,0.5);
}

.c-button:disabled,
.c-button[aria-disabled="true"] {
  cursor: not-allowed;
  filter: grayscale(0.6) brightness(0.7);
}

/* Primary — Birren "go" green key, glows when armed. Dark text reads on
   the bright dark-theme green; the deep light-theme green needs light text. */
.c-button--primary {
  --btn-bg:    var(--color-primary);
  --btn-bg-hi: color-mix(in srgb, var(--color-primary) 70%, white);
  --btn-fg:    var(--color-text-inverse);
  --btn-glow:  color-mix(in srgb, var(--color-primary) 40%, transparent);
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
  box-shadow:
    var(--seam-embossed),
    0 2px 0 0 color-mix(in srgb, var(--color-primary) 50%, black),
    0 4px 12px color-mix(in srgb, var(--color-primary) 40%, transparent),
    0 0 0 0 transparent;
}
[data-theme="light"] .c-button--primary {
  --btn-fg:    var(--c-white);
  text-shadow: none;
}

/* Accent — cyan engage */
.c-button--accent {
  --btn-bg:    var(--color-accent);
  --btn-bg-hi: color-mix(in srgb, var(--color-accent) 70%, white);
  --btn-fg:    var(--color-text-inverse);
  box-shadow:
    var(--seam-embossed),
    0 2px 0 0 color-mix(in srgb, var(--color-accent) 50%, black),
    0 4px 12px color-mix(in srgb, var(--color-accent) 40%, transparent);
}

/* Danger — fire red. Reserve for destructive actions only. */
.c-button--danger {
  --btn-bg:    var(--color-danger);
  --btn-bg-hi: color-mix(in srgb, var(--color-danger) 70%, white);
  --btn-fg:    var(--c-paper);
  box-shadow:
    var(--seam-embossed),
    0 2px 0 0 var(--color-danger-grounded),
    0 4px 12px color-mix(in srgb, var(--color-danger) 40%, transparent);
}

/* Ghost — neutral brushed-silver key. Same machined depth as the chrome
   default, but the gray-green pulled out so it reads as a calm secondary
   action next to a signal-colored primary. */
.c-button--ghost {
  --btn-bg:    var(--color-steel);
  --btn-bg-hi: var(--color-steel-hi);
  --btn-fg:    var(--color-text-inverse);
  background:
    linear-gradient(180deg, var(--btn-bg-hi) 0%, var(--btn-bg) 50%, var(--color-steel-dark) 100%);
  border: 1px solid var(--color-steel-dark);
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
  box-shadow:
    inset 0 1px 0 0 var(--color-steel-hi),
    inset 0 -1px 0 0 var(--color-steel-shadow),
    0 2px 0 0 var(--color-steel-shadow),
    0 3px 6px rgba(0,0,0,0.35);
}
.c-button--ghost:hover { filter: brightness(1.06); }
.c-button--ghost:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 0 var(--color-steel-shadow),
    inset 0 -1px 0 0 var(--color-steel-light),
    0 0 0 0 var(--color-steel-shadow),
    inset 0 2px 4px rgba(0,0,0,0.4);
}

/* Sizes */
.c-button--sm { min-height: 2rem;   padding: var(--space-1) var(--space-3); font-size: var(--fs-3xs); }
.c-button--lg { min-height: 3.25rem; padding: var(--space-3) var(--space-6); font-size: var(--fs-xs); }

/* E-STOP — the big red mushroom */
.c-button--estop {
  --btn-bg:    var(--color-danger);
  --btn-bg-hi: color-mix(in srgb, var(--color-danger) 80%, white);
  --btn-fg:    var(--c-paper);
  width: 7rem;
  height: 7rem;
  border-radius: var(--radius-circle);
  font-size: var(--fs-xs);
  background:
    radial-gradient(circle at 35% 30%,
      var(--btn-bg-hi) 0%,
      var(--btn-bg) 45%,
      var(--color-danger-grounded) 100%);
  border: 4px solid var(--color-bezel-dark);
  box-shadow:
    0 0 0 6px var(--c-signal-amber),
    0 0 0 8px var(--color-bezel-dark),
    0 8px 24px rgba(0,0,0,0.6),
    inset 0 -8px 16px rgba(0,0,0,0.4),
    inset 0 4px 8px rgba(255,255,255,0.2);
  letter-spacing: var(--ls-widest);
}
.c-button--estop:active {
  transform: translateY(4px);
  box-shadow:
    0 0 0 6px var(--c-signal-amber),
    0 0 0 8px var(--color-bezel-dark),
    0 2px 8px rgba(0,0,0,0.8),
    inset 0 -4px 8px rgba(0,0,0,0.5);
}