/* ============================================================
   AXL's Game Lab — colour buttons (Orange / Green / Red / Cyan)

   These replace Bootstrap's Warning / Success / Danger / Info. Each colour
   is set once as four tokens on its class; the Bootstrap variants below and
   the design-system buttons in axl-ui.css (.axl-btn--{colour}, and .btn
   inside .axl-ui) all read the same tokens.

   Its own file so everything that shows buttons can load it: the site and
   the editor (functions.php) and the brand sheet (assets/brand/index.html),
   which cannot take theme.css without it restyling the sheet itself.
     fill / hover / active — the solid background at rest, hover and press
     ink                   — label colour on the solid fill
   The shades are the -700 end of each hue so white labels stay readable
   (WCAG AA); cyan and orange (brand #F47A20) are the exceptions and take
   the dark ink instead.
   ============================================================ */

:is(.btn-orange, .btn-outline-orange, .axl-btn--orange) {
  --axl-btn-fill: #F47A20;
  --axl-btn-fill-hover: #E56B12;
  --axl-btn-fill-active: #D65F0A;
  --axl-btn-ink: #131C3F;
}
:is(.btn-green, .btn-outline-green, .axl-btn--green) {
  --axl-btn-fill: #15803D;
  --axl-btn-fill-hover: #166534;
  --axl-btn-fill-active: #14532D;
  --axl-btn-ink: #fff;
}
:is(.btn-red, .btn-outline-red, .axl-btn--red) {
  --axl-btn-fill: #DC2626;
  --axl-btn-fill-hover: #B91C1C;
  --axl-btn-fill-active: #991B1B;
  --axl-btn-ink: #fff;
}
:is(.axl-btn--grey) {
  --axl-btn-fill: #A5B1C4;
  --axl-btn-fill-hover: #94A1B6;
  --axl-btn-fill-active: #8392A8;
  --axl-btn-ink: #131C3F;
}
:is(.btn-cyan, .btn-outline-cyan, .axl-btn--cyan) {
  --axl-btn-fill: #22D3EE;
  --axl-btn-fill-hover: #06B6D4;
  --axl-btn-fill-active: #0891B2;
  --axl-btn-ink: #131C3F;
}

/* Solid: filled at rest, darker fill on hover / press. */
.btn:is(.btn-orange, .btn-green, .btn-red, .btn-cyan) {
  --bs-btn-color: var(--axl-btn-ink);
  --bs-btn-bg: var(--axl-btn-fill);
  --bs-btn-border-color: var(--axl-btn-fill);
  --bs-btn-hover-color: var(--axl-btn-ink);
  --bs-btn-hover-bg: var(--axl-btn-fill-hover);
  --bs-btn-hover-border-color: var(--axl-btn-fill-hover);
  --bs-btn-active-color: var(--axl-btn-ink);
  --bs-btn-active-bg: var(--axl-btn-fill-active);
  --bs-btn-active-border-color: var(--axl-btn-fill-active);
  --bs-btn-disabled-color: var(--axl-btn-ink);
  --bs-btn-disabled-bg: var(--axl-btn-fill);
  --bs-btn-disabled-border-color: var(--axl-btn-fill);
}

/* Outline: coloured border + label on white. Hover / focus / press darken the
   white a step at a time (as the solid fills darken) rather than inverting;
   the label keeps its colour (cyan's deeper shade included). */
.btn:is(.btn-outline-orange, .btn-outline-green, .btn-outline-red, .btn-outline-cyan) {
  --bs-btn-color: var(--axl-btn-fill);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--axl-btn-fill);
  --bs-btn-hover-color: var(--bs-btn-color);
  --bs-btn-hover-bg: #E1E6F2;
  --bs-btn-hover-border-color: var(--axl-btn-fill);
  --bs-btn-active-color: var(--bs-btn-color);
  --bs-btn-active-bg: #D3DAED;
  --bs-btn-active-border-color: var(--axl-btn-fill);
  --bs-btn-disabled-color: var(--axl-btn-fill);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--axl-btn-fill);
}
/* Cyan's and orange's light fills are unreadable as text on white — outline
   them in a deeper shade of the same hue instead. */
.btn.btn-outline-cyan { --bs-btn-color: #0E7490; }
.btn.btn-outline-orange { --bs-btn-color: #B4530A; }