:root {
  --button-primary-bg: #f5f5f3;
  --button-primary-fg: #0a0a0a;
  --button-primary-hover: #ffffff;
  --button-primary-active: #d8d8d4;
  --button-secondary-bg: transparent;
  --button-secondary-fg: #e9e9e6;
  --button-secondary-border: #555754;
  --button-secondary-hover: #202120;
  --button-neutral-bg: #252625;
  --button-neutral-fg: #e9e9e6;
  --button-neutral-hover: #303130;
  --button-success-bg: #2e6b49;
  --button-success-fg: #effff4;
  --button-success-hover: #397d57;
  --button-warning-bg: #76572c;
  --button-warning-fg: #fff7e8;
  --button-warning-hover: #896937;
  --button-danger-bg: #7a383b;
  --button-danger-fg: #fff3f3;
  --button-danger-hover: #914548;
  --button-cancel-bg: transparent;
  --button-cancel-fg: #c4c5c1;
  --button-cancel-border: #555754;
  --button-disabled-bg: #343534;
  --button-disabled-fg: #777875;
  --button-disabled-border: #343534;
  --button-focus-ring: #f5f5f3;
  --button-shadow: 0 8px 18px -12px rgba(0, 0, 0, .72);
}

:root[data-theme="light"] {
  --button-primary-bg: #111211;
  --button-primary-fg: #ffffff;
  --button-primary-hover: #282a28;
  --button-primary-active: #000000;
  --button-secondary-bg: transparent;
  --button-secondary-fg: #1a1b1a;
  --button-secondary-border: #8f918c;
  --button-secondary-hover: #f0f0ed;
  --button-neutral-bg: #e5e6e1;
  --button-neutral-fg: #1a1b1a;
  --button-neutral-hover: #d8d9d4;
  --button-success-bg: #dff4e6;
  --button-success-fg: #174d2e;
  --button-success-hover: #c9ebd4;
  --button-warning-bg: #fff0d4;
  --button-warning-fg: #674314;
  --button-warning-hover: #ffe5b6;
  --button-danger-bg: #fbe1e1;
  --button-danger-fg: #721f25;
  --button-danger-hover: #f6cccc;
  --button-cancel-bg: transparent;
  --button-cancel-fg: #4f514d;
  --button-cancel-border: #8f918c;
  --button-disabled-bg: #e2e3df;
  --button-disabled-fg: #969893;
  --button-disabled-border: #e2e3df;
  --button-focus-ring: #111211;
  --button-shadow: 0 8px 18px -12px rgba(26, 27, 26, .28);
}

.btn,
.icon-btn,
.iconbtn,
.auth-btn,
.actions-btn,
.btn-bottom,
.btn-bottom-primary,
button.btn,
a.btn {
  border: 1px solid var(--button-secondary-border);
  background: var(--button-secondary-bg);
  color: var(--button-secondary-fg);
  box-shadow: none;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease, transform .14s ease;
}

.btn:hover,
.icon-btn:hover,
.iconbtn:hover,
.auth-btn:hover,
.actions-btn:hover,
.btn-bottom:hover,
.btn-bottom-primary:hover,
button.btn:hover,
a.btn:hover {
  background: var(--button-secondary-hover);
  border-color: var(--button-secondary-fg);
  color: var(--button-secondary-fg);
}

.btn:active,
.icon-btn:active,
.iconbtn:active,
.auth-btn:active,
.actions-btn:active,
.btn-bottom:active,
.btn-bottom-primary:active,
button.btn:active,
a.btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .12);
}

.btn:focus-visible,
.icon-btn:focus-visible,
.iconbtn:focus-visible,
.auth-btn:focus-visible,
.actions-btn:focus-visible,
.btn-bottom:focus-visible,
.btn-bottom-primary:focus-visible,
button.btn:focus-visible,
a.btn:focus-visible {
  outline: 2px solid var(--button-focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 1px var(--button-focus-ring);
}

.btn--primary,
.btn.primary,
.btn-primary,
.auth-btn-accent,
.btn-bottom-primary {
  background: var(--button-primary-bg);
  border-color: var(--button-primary-bg);
  color: var(--button-primary-fg);
  font-weight: 600;
}

.btn--primary:hover,
.btn.primary:hover,
.btn-primary:hover,
.auth-btn-accent:hover,
.btn-bottom-primary:hover {
  background: var(--button-primary-hover);
  border-color: var(--button-primary-hover);
  color: var(--button-primary-fg);
  box-shadow: var(--button-shadow);
}

.btn--primary:active,
.btn.primary:active,
.btn-primary:active,
.auth-btn-accent:active,
.btn-bottom-primary:active {
  background: var(--button-primary-active);
  border-color: var(--button-primary-active);
}

/* Keep the main application CTA filled when legacy section rules are more specific. */
.hero__cta .btn--primary,
.cta-band__actions .btn--primary,
.dept-hero__cta .btn--primary {
  background-color: var(--button-primary-bg) !important;
  background-image: none !important;
  border-color: var(--button-primary-bg) !important;
  color: var(--button-primary-fg) !important;
}

.hero__cta .btn--primary:hover,
.cta-band__actions .btn--primary:hover,
.dept-hero__cta .btn--primary:hover {
  background-color: var(--button-primary-hover) !important;
  border-color: var(--button-primary-hover) !important;
  color: var(--button-primary-fg) !important;
}

.hero__cta .btn--primary:active,
.cta-band__actions .btn--primary:active,
.dept-hero__cta .btn--primary:active {
  background-color: var(--button-primary-active) !important;
  border-color: var(--button-primary-active) !important;
}

/* Keep the footer separator and remove the duplicate rule above it. */
.cta-band {
  border-bottom: 0;
}

.site-footer {
  border-top: 1px solid var(--line);
}

.btn--secondary,
.btn.secondary,
.btn-secondary,
.auth-btn-secondary,
.btn--ghost,
.btn.ghost,
.btn-outline-secondary,
.btn-cancel {
  background: var(--button-secondary-bg);
  border-color: var(--button-secondary-border);
  color: var(--button-secondary-fg);
}

.btn--neutral,
.btn.neutral,
.btn-dark,
.btn-light,
.auth-btn-primary {
  background: var(--button-neutral-bg);
  border-color: var(--button-neutral-bg);
  color: var(--button-neutral-fg);
}

.btn--neutral:hover,
.btn.neutral:hover,
.btn-dark:hover,
.btn-light:hover,
.auth-btn-primary:hover {
  background: var(--button-neutral-hover);
  border-color: var(--button-neutral-hover);
  color: var(--button-neutral-fg);
}

.btn--success,
.btn.success,
.btn-success,
.btn-outline-success {
  background: var(--button-success-bg);
  border-color: var(--button-success-bg);
  color: var(--button-success-fg);
}

.btn--success:hover,
.btn.success:hover,
.btn-success:hover,
.btn-outline-success:hover {
  background: var(--button-success-hover);
  border-color: var(--button-success-hover);
  color: var(--button-success-fg);
}

.btn--warning,
.btn.warning,
.btn-warning,
.btn-outline-warning {
  background: var(--button-warning-bg);
  border-color: var(--button-warning-bg);
  color: var(--button-warning-fg);
}

.btn--warning:hover,
.btn.warning:hover,
.btn-warning:hover,
.btn-outline-warning:hover {
  background: var(--button-warning-hover);
  border-color: var(--button-warning-hover);
  color: var(--button-warning-fg);
}

.btn--danger,
.btn.danger,
.btn-danger,
.btn-outline-danger,
.iconbtn--danger,
.btn--danger-ghost,
.btn-destructive {
  background: var(--button-danger-bg);
  border-color: var(--button-danger-bg);
  color: var(--button-danger-fg);
}

.btn--danger:hover,
.btn.danger:hover,
.btn-danger:hover,
.btn-outline-danger:hover,
.iconbtn--danger:hover,
.btn-destructive:hover {
  background: var(--button-danger-hover);
  border-color: var(--button-danger-hover);
  color: var(--button-danger-fg);
}

.btn--danger-ghost {
  background: transparent;
  border-color: var(--button-danger-bg);
  color: var(--button-danger-fg);
}

.btn--danger-ghost:hover {
  background: color-mix(in srgb, var(--button-danger-bg) 22%, transparent);
  border-color: var(--button-danger-hover);
  color: var(--button-danger-fg);
}

.btn--cancel,
.btn.cancel,
.btn-cancel,
.btn-outline-dark,
.btn-outline-light {
  background: var(--button-cancel-bg);
  border-color: var(--button-cancel-border);
  color: var(--button-cancel-fg);
}

.btn--muted,
.btn-muted,
.btn:disabled,
.btn[aria-disabled="true"],
.icon-btn:disabled,
.iconbtn:disabled,
.auth-btn:disabled,
.actions-btn:disabled {
  background: var(--button-disabled-bg);
  border-color: var(--button-disabled-border);
  color: var(--button-disabled-fg);
  opacity: 1;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

button.is-loading,
.btn.is-loading,
.auth-btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

button.is-loading::after,
.btn.is-loading::after,
.auth-btn.is-loading::after {
  content: "";
  width: 1em;
  height: 1em;
  position: absolute;
  inset: 50% auto auto 50%;
  margin: -.5em 0 0 -.5em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  color: var(--button-secondary-fg);
  animation: button-spin .65s linear infinite;
}

.btn--primary.is-loading::after,
.btn.primary.is-loading::after,
.btn-primary.is-loading::after,
.auth-btn-accent.is-loading::after {
  color: var(--button-primary-fg);
}

@keyframes button-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .icon-btn,
  .iconbtn,
  .auth-btn,
  .actions-btn,
  .btn-bottom,
  .btn-bottom-primary,
  button.is-loading::after,
  .btn.is-loading::after,
  .auth-btn.is-loading::after {
    transition: none;
    animation: none;
  }
}

:root {
  --button-secondary-border: #777b76;
  --button-secondary-hover: #292b29;
  --button-neutral-bg: #343735;
  --button-neutral-hover: #414441;
  --button-success-bg: #4dcd82;
  --button-success-fg: #06180d;
  --button-success-hover: #63dc96;
  --button-warning-bg: #f0b44d;
  --button-warning-fg: #201505;
  --button-warning-hover: #f7c56d;
  --button-danger-bg: #f27a80;
  --button-danger-fg: #2a070a;
  --button-danger-hover: #ff9297;
  --button-disabled-bg: #3d403d;
  --button-disabled-fg: #8f928d;
}

:root[data-theme="light"] {
  --button-secondary-border: #6f736d;
  --button-secondary-hover: #eceee9;
  --button-neutral-bg: #d7d9d4;
  --button-neutral-hover: #c8cbc5;
  --button-success-bg: #4dcd82;
  --button-success-fg: #06180d;
  --button-success-hover: #3eb873;
  --button-warning-bg: #f0b44d;
  --button-warning-fg: #201505;
  --button-warning-hover: #dfa13d;
  --button-danger-bg: #f27a80;
  --button-danger-fg: #2a070a;
  --button-danger-hover: #dc6269;
  --button-disabled-bg: #e0e2dd;
  --button-disabled-fg: #858982;
}

.btn--primary,
.btn.primary,
.btn-primary,
.btn--success,
.btn.success,
.btn-success,
.btn--warning,
.btn.warning,
.btn-warning,
.btn--danger,
.btn.danger,
.btn-danger,
.btn-destructive,
.auth-btn-accent {
  font-weight: 650;
  box-shadow: var(--button-shadow);
}

.btn--success:focus-visible,
.btn.success:focus-visible,
.btn-success:focus-visible,
.btn--warning:focus-visible,
.btn.warning:focus-visible,
.btn-warning:focus-visible,
.btn--danger:focus-visible,
.btn.danger:focus-visible,
.btn-danger:focus-visible,
.btn-destructive:focus-visible {
  outline-color: currentColor;
}