/*
 * ============================================================================
 * Copyright (c) 2026 ATH SOLUTIONS (PTY) LTD. All rights reserved.
 * KwaZulu-Natal, Republic of South Africa.
 * ============================================================================
 *
 * @BEGIN Developer Log Header Block
 * @FILENAME: button.css
 * @TITLE: PATHWRITE
 * @DESCRIPTION: Button component - variants, sizes, icon buttons, disabled/loading states.
 * @AUTHOR: Ary van der Pijl
 * @COMPANY: ATH SOLUTIONS (PTY) LTD
 * @WEBSITE: https://www.ath.solutions/
 * @EMAIL: info@ath.solutions
 * @COPYRIGHT: All Rights Reserved
 * @LICENSE: ATH SOLUTIONS - PROPRIETARY SOFTWARE LICENCE AGREEMENT (https://www.ath.solutions/documents/ath_solutions_software_licence_agreement.pdf)
 *
 * BEGIN CHANGELOG
 * @IMPORTANT NOTICE: Developers working on these files MUST update and maintain the Developers Change Log, failure to do is not an option:
 * !==================================================================================================================================================================
 * VERSION 1.0.3
 * - File Modified | Ary van der Pijl | 2026-09-03 | Gap Analysis v4.0 §4.2: added a .btn-outline-secondary override, same pattern as VERSION 1.0.2's .btn-outline-primary - Bootstrap's default #6c757d text/border passes WCAG 2.1 AA in light mode (4.69:1) but fails in dark mode (3.12:1 against --color-surface's dark value), the second of the 2 named-but-unfixed color-contrast violations from the 2026-08-20 axe-core pass. Repointed to --color-text-muted, already theme-aware and passing in both modes (5.33:1 light / 5.71:1 dark). |
 * VERSION 1.0.2
 * - File Modified | Ary van der Pijl | 2026-08-06 | PATHWRITE brand style guide rollout: buttons now use Montserrat SemiBold (was Inter Medium), --radius-md (12px standard) instead of --radius-sm, and .btn-secondary gets an explicit black border with a gold hover border per the guide's button spec. .btn-primary:hover text switched to the dark brand colour - white-on-gold fails WCAG AA contrast. Also added a .btn-outline-primary override (Bootstrap's own variant, used as-is on several brochure pages and the template editor) - it had no override before this and was still rendering Bootstrap's default blue. |
 * VERSION 1.0.1
 * - File Modified | Ary van der Pijl | 2026-08-06 | Added a press-state shadow reduction on :active - no click feedback existed beyond the hover colour change (Phase 21 micro-interactions audit). |
 * VERSION 1.0.0
 * + File Created | Ary van der Pijl | 2026-08-06 | Extracted from main.css as part of the Phase 17 CSS architecture split (9-file hierarchy per STD-E). |
 * ==================================================================================================================================================================!
 * END CHANGELOG
 */

/* ─── Buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  padding: var(--space-2) var(--space-4);
  height: 36px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.btn:active {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15);
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-text);
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-primary);
}

.btn-secondary:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
  border-color: var(--color-primary-hover);
}

/* Bootstrap's own outline-primary variant (still used directly on a few brochure pages
   and the template editor) - override its --bs-btn-* vars to the brand black/gold pair. */
.btn-outline-primary {
  --bs-btn-color: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-color: var(--color-text);
  --bs-btn-hover-bg: var(--color-primary-hover);
  --bs-btn-hover-border-color: var(--color-primary-hover);
  --bs-btn-focus-shadow-rgb: 212, 175, 55;
  --bs-btn-active-color: var(--color-text);
  --bs-btn-active-bg: var(--color-primary-hover);
  --bs-btn-active-border-color: var(--color-primary-hover);
  --bs-btn-disabled-color: var(--color-primary);
  --bs-btn-disabled-border-color: var(--color-primary);
}

/* Bootstrap's own outline-secondary variant - override its --bs-btn-* vars, same pattern as
   .btn-outline-primary above. Bootstrap's default #6c757d text/border only passes WCAG 2.1 AA's
   4.5:1 against --color-surface in light mode (4.69:1) - fails badly in dark mode (3.12:1 against
   --color-surface's dark value). --color-text-muted is already theme-aware and passes in both
   (5.33:1 light / 5.71:1 dark) - Gap Analysis v4.0 §4.2. */
.btn-outline-secondary {
  --bs-btn-color: var(--color-text-muted);
  --bs-btn-border-color: var(--color-text-muted);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-text-muted);
  --bs-btn-hover-border-color: var(--color-text-muted);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--color-text-muted);
  --bs-btn-active-border-color: var(--color-text-muted);
  --bs-btn-disabled-color: var(--color-text-muted);
  --bs-btn-disabled-border-color: var(--color-text-muted);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  border-color: transparent;
}

.btn-ghost:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}

.btn-danger {
  background: var(--color-danger);
  color: #fff;
  border-color: var(--color-danger);
}

.btn-danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}

.btn-sm {
  height: 30px;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
}

.btn-lg {
  height: 44px;
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-md);
}

.btn .material-icons-round {
  font-size: 16px;
}

.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
}

.btn-icon.btn-sm {
  width: 30px;
  height: 30px;
}

.btn[disabled], .btn.disabled {
  opacity: .5;
  cursor: not-allowed;
}

.btn.loading .btn-text {
  opacity: 0;
}