/* Tactile controls: existing semantic colors, a solid base and a short press. */
:root { --button-control-edge: #a8bbd9; --button-accent-edge: #cb8e21; }
:root[data-theme="dark"] { --button-control-edge: #091123; --button-accent-edge: #cb8e21; }

:is(.button, .theme-toggle, .sound-toggle, .nav-login, .exit-practice, .catalog-tabs button, .underline-toggle, .image-viewer button, .back-link.return-link) {
  border-width: 3px;
  border-style: solid;
  border-radius: 14px;
  box-shadow: 0 var(--button-depth, 3px) 0 var(--button-edge, var(--button-control-edge));
  font-weight: 750;
  transform: translateY(0);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .1s ease, transform .1s ease;
}

.button {
  --button-depth: 4px;
  --button-edge: var(--button-accent-edge);
  letter-spacing: .01em;
}
.button.secondary { --button-edge: var(--button-control-edge); }
.button.small { border-radius: 11px; --button-depth: 3px; }
.catalog-tabs button { border-color: var(--line); }
.catalog-tabs button.active { --button-edge: var(--primary-border); }
:is(.theme-toggle, .sound-toggle, .exit-practice) { --button-depth: 2px; border-radius: 12px; }
.exit-practice { border-color: var(--line); }
.nav-login { border-color: var(--line); }


:is(.button, .theme-toggle, .sound-toggle, .nav-login, .exit-practice, .catalog-tabs button, .underline-toggle, .image-viewer button, .back-link.return-link):hover {
  transform: translateY(0);
  box-shadow: 0 var(--button-depth, 3px) 0 var(--button-edge, var(--button-control-edge));
}
:is(.button, .theme-toggle, .sound-toggle, .nav-login, .exit-practice, .catalog-tabs button, .underline-toggle, .image-viewer button, .back-link.return-link):not(:disabled):not([aria-disabled="true"]):active {
  transform: translateY(var(--button-depth, 3px));
  box-shadow: 0 0 0 var(--button-edge, var(--button-control-edge));
}
:is(.button, .theme-toggle, .sound-toggle, .nav-login, .exit-practice, .catalog-tabs button, .underline-toggle, .image-viewer button, .back-link.return-link):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 4px;
}
:is(.button, .theme-toggle, .sound-toggle, .nav-login, .exit-practice, .catalog-tabs button, .underline-toggle, .image-viewer button, .back-link.return-link):is(:disabled, [aria-disabled="true"]) {
  background: var(--disabled-surface);
  border-color: var(--disabled-border);
  color: var(--disabled-ink);
  box-shadow: none;
  transform: none;
  opacity: 1;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  :is(.button, .theme-toggle, .sound-toggle, .nav-login, .exit-practice, .catalog-tabs button, .underline-toggle, .image-viewer button, .back-link.return-link) { transition: none; }
  :is(.button, .theme-toggle, .sound-toggle, .nav-login, .exit-practice, .catalog-tabs button, .underline-toggle, .image-viewer button, .back-link.return-link):not(:disabled):not([aria-disabled="true"]):active { transform: none; }
}