/* Cyber Armor Systems — Buttons.  Requires cas-tokens.css. */

.cas-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--cas-space-8);
  padding: var(--cas-space-8) var(--cas-space-32);
  font-family: var(--cas-font-heading);
  font-weight: 900;
  font-size: var(--cas-text-caption);
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: var(--cas-radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.cas-btn:hover  { transform: translateY(-1px); }
.cas-btn:active { transform: translateY(0); }
/* The 2px offset means the ring is surrounded by page/card colour, never by the
   button — so it must out-contrast the GROUND, not the control. --cas-theme-focus
   (gold-dark light / gold-light dark) is the only gold that does. */
.cas-btn:focus-visible {
  outline: 3px solid var(--cas-theme-focus);
  outline-offset: 2px;
}

/* HOVER LIGHTENS GOLD — IT NEVER DARKENS IT. gold -> gold-dark is 3.86:1 on navy
   text and fails AA; gold -> gold-light is 7.96:1 AAA. Measured, not stylistic. */
.cas-btn-primary {
  background: var(--cas-gold);
  color: var(--cas-navy);              /* 6.24:1 AA  */
}
.cas-btn-primary:hover { background: var(--cas-gold-light); }  /* 7.96:1 AAA */

/* Navy fill + white text in both themes; the white label and the border carry
   identification on the dark page, where the navy fill is only a 1.24:1 step. */
.cas-btn-secondary {
  background: var(--cas-navy);
  color: var(--cas-white);             /* 13.68:1 AAA */
  border-color: var(--cas-theme-border);
}
.cas-btn-secondary:hover { background: var(--cas-navy-light); } /* white 9.30:1 AAA */

/* Theme-aware: a navy outline is invisible on a navy-dark page. */
.cas-btn-outline {
  background: transparent;
  color: var(--cas-theme-text);        /* navy 12.85:1 / white 16.95:1 — both AAA */
  border-color: var(--cas-theme-text);
}
.cas-btn-outline:hover { background: var(--cas-theme-surface); }

/* Gold outline is for NAVY/DARK surfaces only: gold on white is 2.19:1 and fails
   at any size. On light surfaces use .cas-btn-outline instead. */
.cas-btn-outline-gold {
  background: transparent;
  color: var(--cas-gold);              /* 7.72:1 AAA on navy-dark */
  border-color: var(--cas-gold);
}
.cas-btn-outline-gold:hover { background: rgba(245, 155, 0, 0.12); }

/* Theme-aware: mid-blue is unreadable on a navy-dark page. */
.cas-btn-ghost {
  background: transparent;
  color: var(--cas-theme-text-body);   /* mid-blue 8.42:1 / #aec6e8 9.72:1 — both AAA */
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cas-btn-ghost:hover { color: var(--cas-theme-text); }