/* Shared action vocabulary. Source of truth; distributed by sync_web_fonts.py.
   These rules intentionally outrank page variants and saved MUI themes. */
@layer lw-action-states, lw-action-controls;
@layer lw-action-controls {
:root {
  --action-primary: #DB9500;
  --action-primary-hover: #C58600;
  --action-ink: #120F12;
  --action-surface: #FFFFFF;
  --action-hover: #F8F6F3;
  --action-pressed: #E5DCD3;
  --action-border: #8B838B;
  --action-disabled: #EEEAE6;
  --action-disabled-ink: #6E686E;
  --action-disabled-border: #D1C9C1;
  --action-danger: #A52E39;
  --action-danger-hover: #872630;
}
:is(header, .sidebar, .code-block, .diagram-toolbar, .closing, .hero),
[data-action-theme="dark"], .dark, [data-mui-color-scheme="dark"] {
  --action-ink: #FFFFFF;
  --action-surface: #292329;
  --action-hover: #403840;
  --action-pressed: #504750;
  --action-border: #A69DA6;
  --action-disabled: #403840;
  --action-disabled-ink: #C8BFC8;
  --action-disabled-border: #766F76;
  --action-danger: #FFB4B9;
  --action-danger-hover: #FFC9CD;
}
:is(.MuiButton-root:not(.MuiButton-colorInherit), .button, .crm-button,
 button:where(:not(.MuiButtonBase-root):not(.diagram-node):not(.proposal):not([aria-expanded]))) {
  min-height: 44px !important;
  max-width: 100%;
  font-family: 'Quatro', sans-serif;
  font-weight: 400 !important;
  font-synthesis: none;
  line-height: 1.4;
  text-transform: none;
  border-radius: 8px;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
  touch-action: manipulation;
}
:is(button:where(:not(.MuiButtonBase-root):not(.diagram-node):not(.proposal):not([aria-expanded])),
 .MuiButton-outlined, .crm-button, .button-outline) {
  background: var(--action-surface) !important;
  color: var(--action-ink) !important;
  border: 1px solid var(--action-border) !important;
  box-shadow: none !important;
}
:is(button:where(:not(.MuiButtonBase-root):not(.diagram-node):not(.proposal):not([aria-expanded])),
 .MuiButton-outlined, .crm-button, .button-outline):hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--action-hover) !important;
  border-color: var(--action-ink) !important;
}
.MuiButton-text:not(.MuiButton-colorInherit) { color: var(--action-ink) !important; }
:is(button:where(:not(.MuiButtonBase-root):not(.diagram-node):not(.proposal):not([aria-expanded])),
 .MuiButton-outlined, .crm-button, .button-outline):active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--action-pressed) !important;
}
:is(button.primary, .button-gold, [data-action="primary"], .MuiButton-contained) {
  background: var(--action-primary) !important;
  color: #120F12 !important;
  border: 1px solid #956500 !important;
  box-shadow: none !important;
}
:is(button.primary, .button-gold, [data-action="primary"], .MuiButton-contained):hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--action-primary-hover) !important;
  border-color: #795200 !important;
  box-shadow: none !important;
  transform: none !important;
}
:is(button.primary, .button-gold, [data-action="primary"], .MuiButton-contained):active:not(:disabled):not([aria-disabled="true"]) {
  background: #AF7700 !important;
}
:is(.MuiButton-colorError, [data-action="danger"]) {
  color: var(--action-danger) !important;
  background: var(--action-surface) !important;
  border: 1px solid var(--action-danger) !important;
}
:is(.MuiButton-colorError, [data-action="danger"]):hover:not(:disabled):not([aria-disabled="true"]) {
  color: var(--action-danger-hover) !important;
  border-color: var(--action-danger-hover) !important;
  background: var(--action-hover) !important;
}
/* Selection identifies the current view; it is not a primary action. */
button[aria-pressed="true"]:not(.diagram-node), .MuiToggleButton-root.Mui-selected {
  background: var(--action-hover) !important;
  color: var(--action-ink) !important;
  border-color: var(--action-ink) !important;
  box-shadow: inset 0 -2px 0 var(--action-primary) !important;
}
:is(button, .MuiButton-root, .MuiIconButton-root, .button, .crm-button):focus-visible,
.MuiButtonBase-root.Mui-focusVisible {
  outline: 2px solid var(--action-ink) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--action-surface) !important;
}
}
@layer lw-action-states {
/* This final state overrides contained, outlined, destructive, selected and hover. */
:is(button:disabled, .MuiButton-root.Mui-disabled, .MuiIconButton-root.Mui-disabled,
 .button[aria-disabled="true"], .crm-button[aria-disabled="true"], button[aria-disabled="true"]) {
  background: var(--action-disabled) !important;
  color: var(--action-disabled-ink) !important;
  -webkit-text-fill-color: var(--action-disabled-ink);
  border: 1px solid var(--action-disabled-border) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
  cursor: not-allowed !important;
}
/* Busy remains visually distinct from an action blocked by a prerequisite. */
:is(button, .MuiButton-root)[aria-busy="true"] {
  background: var(--action-surface) !important;
  color: var(--action-ink) !important;
  -webkit-text-fill-color: currentColor;
  border: 1px solid var(--action-border) !important;
  cursor: progress !important;
}
button[aria-busy="true"]::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: middle;
  animation: action-progress 800ms linear infinite;
}
}
@layer lw-action-controls {
.action-help { color: var(--action-disabled-ink); font-size: 13px; line-height: 1.5; }
@keyframes action-progress { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  :is(button, .MuiButton-root, .button, .crm-button) { transition: none !important; }
  button[aria-busy="true"]::before { animation: none; }
}
@media (forced-colors: active) {
  :is(button:disabled, .MuiButton-root.Mui-disabled) { border-color: GrayText !important; }
  :is(button, .MuiButton-root, .button):focus-visible { outline: 2px solid Highlight !important; }
}

}