:root {
  --btn-primary-bg: #18201c;
  --btn-primary-fg: #ffffff;
  --btn-primary-hover: #29342f;
  --btn-secondary-bg: #e2e8e4;
  --btn-secondary-fg: #18201c;
  --btn-secondary-hover: #d3ddd7;
  --btn-ghost-bg: #fffefa;
  --btn-ghost-fg: #26302b;
  --btn-ghost-border: #9fa9a3;
  --btn-accent-bg: #c8e65c;
  --btn-accent-fg: #18200e;
  --btn-danger-bg: #a9362a;
  --btn-danger-fg: #ffffff;
  --btn-focus: #087f6b;
  --btn-disabled-bg: #d8dcd9;
  --btn-disabled-fg: #555c57;
}

button,
.button,
[role="button"] {
  min-height: 42px;
  border-radius: 10px;
  font-family: Pretendard, "Noto Sans KR", Inter, system-ui, sans-serif;
  font-size: .875rem;
  font-weight: 760;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 1px solid var(--btn-primary-bg);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  box-shadow: none;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

button:hover:not(:disabled) {
  border-color: var(--btn-primary-hover);
  background: var(--btn-primary-hover);
  color: var(--btn-primary-fg);
  box-shadow: 0 6px 16px rgba(24, 32, 28, .14);
  transform: translateY(-1px);
}

button:active:not(:disabled) {
  box-shadow: none;
  transform: translateY(0);
}

button:focus-visible,
.button:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid rgba(8, 127, 107, .34) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 1px #ffffff !important;
}

button.secondary,
.button.secondary {
  border-color: #aab5af !important;
  background: var(--btn-secondary-bg) !important;
  color: var(--btn-secondary-fg) !important;
}

button.secondary:hover:not(:disabled),
.button.secondary:hover {
  border-color: #89968f !important;
  background: var(--btn-secondary-hover) !important;
  color: #111713 !important;
}

button.ghost,
.button.ghost,
.btn-random-tool {
  border: 1px solid var(--btn-ghost-border) !important;
  background: var(--btn-ghost-bg) !important;
  color: var(--btn-ghost-fg) !important;
}

button.ghost:hover:not(:disabled),
.button.ghost:hover,
.btn-random-tool:hover {
  border-color: #68736d !important;
  background: #f0f1ec !important;
  color: #111713 !important;
}

button.danger,
button.destructive,
.button.danger {
  border-color: var(--btn-danger-bg) !important;
  background: var(--btn-danger-bg) !important;
  color: var(--btn-danger-fg) !important;
}

button.danger:hover:not(:disabled),
button.destructive:hover:not(:disabled),
.button.danger:hover {
  border-color: #87291f !important;
  background: #87291f !important;
  color: #ffffff !important;
}

button:disabled,
button[aria-disabled="true"],
.button[aria-disabled="true"] {
  border-color: #c1c7c3 !important;
  background: var(--btn-disabled-bg) !important;
  color: var(--btn-disabled-fg) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Tool action buttons: preserve card-style controls while unifying actual actions. */
:where(.case-actions, .image-drop-actions, .ssl-summary-actions, .animal-actions, .fallback-actions) > button {
  min-height: 42px !important;
  border: 1px solid var(--btn-primary-bg) !important;
  border-radius: 10px !important;
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-fg) !important;
  font-size: .875rem !important;
  font-weight: 760 !important;
  line-height: 1.25 !important;
}

:where(.case-actions, .image-drop-actions, .ssl-summary-actions, .animal-actions, .fallback-actions) > button:hover:not(:disabled) {
  border-color: var(--btn-primary-hover) !important;
  background: var(--btn-primary-hover) !important;
  color: #ffffff !important;
}

:where(.case-actions, .image-drop-actions, .ssl-summary-actions, .animal-actions, .fallback-actions) > button.secondary {
  border-color: #aab5af !important;
  background: var(--btn-secondary-bg) !important;
  color: var(--btn-secondary-fg) !important;
}

:where(.case-actions, .image-drop-actions, .ssl-summary-actions, .animal-actions, .fallback-actions) > button.ghost {
  border-color: var(--btn-ghost-border) !important;
  background: var(--btn-ghost-bg) !important;
  color: var(--btn-ghost-fg) !important;
}

:where(.tool-content, .tool-fallback) button:disabled {
  border-color: #c1c7c3 !important;
  background: var(--btn-disabled-bg) !important;
  color: var(--btn-disabled-fg) !important;
  opacity: 1 !important;
}

/* Win over legacy tool-specific role colors without changing button layout. */
.tool-page-shell .tool-content button.secondary,
.tool-page-shell .tool-fallback button.secondary {
  border-color: #aab5af !important;
  background: var(--btn-secondary-bg) !important;
  color: var(--btn-secondary-fg) !important;
}

.tool-page-shell .tool-content button.secondary:hover:not(:disabled),
.tool-page-shell .tool-fallback button.secondary:hover:not(:disabled) {
  border-color: #89968f !important;
  background: var(--btn-secondary-hover) !important;
  color: #111713 !important;
}

.tool-page-shell .tool-content button.ghost,
.tool-page-shell .tool-fallback button.ghost {
  border-color: var(--btn-ghost-border) !important;
  background: var(--btn-ghost-bg) !important;
  color: var(--btn-ghost-fg) !important;
}

.tool-page-shell .tool-content button:disabled,
.tool-page-shell .tool-fallback button:disabled {
  border-color: #c1c7c3 !important;
  background: var(--btn-disabled-bg) !important;
  color: var(--btn-disabled-fg) !important;
  opacity: 1 !important;
}

/* Dark result surfaces use the tile accent for the leading action. */
:where([class*="-output-panel"], [class*="-result-panel"], [class*="-preview-panel"], [class*="-summary-card"], [class*="-camera-panel"], .tip-receipt, .animal-result-panel) .case-actions > button:not(.secondary):not(.ghost):not(:disabled) {
  border-color: var(--btn-accent-bg) !important;
  background: var(--btn-accent-bg) !important;
  color: var(--btn-accent-fg) !important;
}

:where([class*="-output-panel"], [class*="-result-panel"], [class*="-preview-panel"], [class*="-summary-card"], [class*="-camera-panel"], .tip-receipt, .animal-result-panel) .case-actions > button:not(.secondary):not(.ghost):hover:not(:disabled) {
  border-color: #b3d23f !important;
  background: #b3d23f !important;
  color: #11170b !important;
}

/* Toggle groups and selectable options. */
:where(.case-modes, .hash-mode-tabs, .password-mode-tabs, .tip-presets, .area-presets, .ip-presets) button {
  min-height: 38px !important;
  border: 1px solid #aab3ae !important;
  background: #fffefa !important;
  color: #26302b !important;
  font-size: .8125rem !important;
  box-shadow: none !important;
}

:where(.case-modes, .hash-mode-tabs, .password-mode-tabs, .tip-presets, .area-presets, .ip-presets) button:is(.active, .selected, [aria-pressed="true"]) {
  border-color: #18201c !important;
  background: #18201c !important;
  color: #ffffff !important;
}

.tool-page-shell .tool-content :where(.case-modes, .hash-mode-tabs, .password-mode-tabs, .tip-presets, .area-presets, .ip-presets) button {
  border-color: #aab3ae !important;
  background: #fffefa !important;
  color: #26302b !important;
}

.tool-page-shell .tool-content :where(.case-modes, .hash-mode-tabs, .password-mode-tabs, .tip-presets, .area-presets, .ip-presets) button:is(.active, .selected, [aria-pressed="true"]) {
  border-color: #18201c !important;
  background: #18201c !important;
  color: #ffffff !important;
}

/* Card-like buttons keep their visual purpose but gain readable typography and focus. */
:where(.calculator-history, .unit-all-results, .qr-history, .name-results, .hash-results, .password-results, .url-parts-grid, .url-query-list) button {
  min-height: 38px !important;
  font-size: .8125rem !important;
}

.calculator-keys .calc-key {
  min-height: 58px !important;
  font-size: 1rem !important;
}

.pin-btn {
  min-height: 34px !important;
  font-size: 1rem !important;
}

.meme-bg {
  font-size: .75rem !important;
  line-height: 1.25 !important;
}

.tool-page-shell .ip-presets button,
.tool-page-shell .name-results article > button {
  font-size: .75rem !important;
}

.picker-swatches button span,
.picker-swatches button code,
.picker-palette button code {
  padding: 4px 6px !important;
  border-radius: 6px !important;
  background: rgba(17, 23, 19, .82) !important;
  color: #ffffff !important;
  text-shadow: none !important;
}

.personality-answers button {
  font-size: .8125rem !important;
  line-height: 1.45 !important;
}

.tool-action-bar button,
.tool-action-bar .share-icon {
  min-height: 36px !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  background: rgba(255,255,255,.12) !important;
  color: #ffffff !important;
  font-size: .8125rem !important;
  box-shadow: none !important;
}

.tool-action-bar button:hover:not(:disabled),
.tool-action-bar .share-icon:hover {
  border-color: rgba(255,255,255,.46) !important;
  background: rgba(255,255,255,.22) !important;
  color: #ffffff !important;
  transform: none !important;
}

.view-toolbar button {
  min-height: 40px !important;
  border: 1px solid #9fa79f !important;
  background: #fffefa !important;
  color: #202720 !important;
  font-size: .8125rem !important;
}

.monologue-section button {
  border-color: var(--btn-accent-bg) !important;
  background: var(--btn-accent-bg) !important;
  color: var(--btn-accent-fg) !important;
}

@media (max-width: 480px) {
  :where(.case-actions, .image-drop-actions, .ssl-summary-actions, .animal-actions) > button {
    min-height: 46px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  button,
  .button,
  [role="button"] {
    transition: none !important;
  }
}