/* Shared action controls. Loaded after page styles so sections own layout,
   while this file owns button colors, typography and interaction states. */
:root {
  --action-primary: #0666b5;
  --action-primary-hover: #07558f;
  --action-primary-active: #084571;
  --action-on-primary: #ffffff;
  --action-secondary: var(--workspace-soft);
  --action-secondary-hover: #e4edf7;
  --action-secondary-active: #d7e5f3;
  --action-secondary-text: var(--blue);
  --action-border: #71849e;
  --action-focus: #0d4f91;
  --action-disabled-bg: var(--workspace-soft);
  --action-disabled-text: var(--muted);
  --action-icon-filter: none;
}
html[data-theme="dark"] {
  --action-secondary-text: #b7ddff;
  --action-secondary-hover: #283b53;
  --action-secondary-active: #304762;
  --action-border: #6d85a4;
  --action-focus: #83c5ff;
  --action-icon-filter: brightness(0) invert(1);
}

:root .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 16px;
  border: 1px solid var(--action-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  background: var(--action-secondary);
  color: var(--action-secondary-text);
}
:root .button.button--primary {
  background: var(--action-primary);
  border-color: var(--action-primary);
  color: var(--action-on-primary);
}
:root .button.button--ghost {
  background: var(--action-secondary);
  border-color: var(--action-border);
  color: var(--action-secondary-text);
}
:root .button:not(:disabled):not([aria-disabled="true"]):hover {
  background: var(--action-secondary-hover);
}
:root .button:not(:disabled):not([aria-disabled="true"]):active {
  background: var(--action-secondary-active);
}
:root .button.button--primary:not(:disabled):not([aria-disabled="true"]):hover {
  background: var(--action-primary-hover);
  border-color: var(--action-primary-hover);
}
:root .button.button--primary:not(:disabled):not([aria-disabled="true"]):active {
  background: var(--action-primary-active);
  border-color: var(--action-primary-active);
}
:root .button:focus-visible {
  outline: 3px solid var(--action-focus);
  outline-offset: 3px;
}
:root .button:is(:disabled, [aria-disabled="true"]) {
  background: var(--action-disabled-bg);
  color: var(--action-disabled-text);
  border-color: var(--line);
  cursor: not-allowed;
  box-shadow: none;
}
:root .button .ui-icon { filter: var(--action-icon-filter); }
:root .button.button--primary .ui-icon { filter: brightness(0) invert(1); }
:root .button:is(:disabled, [aria-disabled="true"]) .ui-icon { filter: var(--action-icon-filter); opacity: .6; }