/* ==========================================================================
   COMPONENT — Buttons (calculator keys)
   Depends on tokens defined in css/main.css
   ========================================================================== */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 76px;
  border-radius: var(--radius-btn);
  font-size: var(--fs-btn);
  font-weight: var(--fw-semibold);
  background: var(--color-btn-number);
  color: var(--color-btn-number-text);
  box-shadow: var(--shadow-btn-soft);
  transition:
    transform var(--duration-fast) var(--ease-press),
    box-shadow var(--duration-fast) var(--ease-press),
    background var(--duration-fast) ease;
  user-select: none;
}

.btn:active {
  transform: scale(0.97);
  box-shadow: var(--shadow-btn-soft-active);
}

/* Number keys 0–9 and decimal point */
.btn--number {
  background: var(--color-btn-number);
  color: var(--color-btn-number-text);
  font-weight: var(--fw-regular);
  box-shadow: var(--shadow-btn-soft);
}

.btn--number:active {
  box-shadow: var(--shadow-btn-soft-active);
}

/* Function keys: menu / +/- / % */
.btn--function {
  background: var(--color-btn-function);
  color: var(--color-btn-function-text);
  font-size: var(--fs-btn-fn);
  font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-btn-soft);
}

.btn--function:active {
  box-shadow: var(--shadow-btn-soft-active);
}

/* Operator keys: ÷ × − + = */
.btn--operator {
  background: var(--color-btn-operator);
  color: var(--color-btn-operator-text);
  box-shadow: var(--shadow-btn-soft-operator);
  font-weight: var(--fw-bold);
}

.btn--operator:active {
  transform: scale(0.97);
  box-shadow: var(--shadow-btn-soft-operator-active);
}

/* Operator currently selected (e.g. mid-calculation) — inverted highlight */
.btn--operator.is-active {
  background: var(--color-btn-number);
  color: var(--color-btn-operator);
  box-shadow: var(--shadow-btn-pressed);
  transform: none;
}

/* Wide key — used for "0" spanning two columns */
.btn--wide {
  grid-column: span 2;
  justify-content: flex-start;
  padding-left: var(--space-7);
  border-radius: var(--radius-btn-wide);
}

/* Icon buttons — top bar menu / mic, small circular controls */
.btn--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--radius-pill);
  background: var(--color-btn-function);
  color: var(--color-btn-function-text);
  box-shadow: var(--shadow-btn-soft);
  flex-shrink: 0;
  outline: none;
  transition: transform var(--duration-fast) var(--ease-press), box-shadow var(--duration-fast) var(--ease-press);
}

.btn--icon:active {
  transform: scale(0.94);
  box-shadow: var(--shadow-btn-soft-active);
}

.btn--icon:focus-visible {
  outline: 2px solid var(--color-btn-operator);
  outline-offset: 2px;
}

.btn--icon svg {
  width: 18px;
  height: 18px;
}

/* Disabled state, shared across key types */
.btn:disabled,
.btn.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}