/* WEBIXA brand tokens. Yellow and cyan are sampled from the official logo (wwwroot/brand/logo.png). */
:root {
  --wbx-yellow: #FFD81F;
  --wbx-black:  #111111;
  --wbx-cyan:   #02A0D5;
  --wbx-white:  #FFFFFF;
  --wbx-gray-50:  #F7F7F8;
  --wbx-gray-200: #E4E4E7;
  --wbx-gray-500: #71717A;
  --wbx-gray-800: #27272A;
  --wbx-success: #16A34A;
  --wbx-warning: #D97706;
  --wbx-danger:  #DC2626;
  --wbx-info:    var(--wbx-cyan);

  --wbx-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Map brand onto Bootstrap 5.3 variables */
  --bs-body-font-family: var(--wbx-font);
  --bs-body-color: var(--wbx-black);
  --bs-body-bg: var(--wbx-gray-50);
  --bs-link-color: #0077A8;          /* darker cyan so links pass WCAG AA on light backgrounds */
  --bs-link-color-rgb: 0, 119, 168;
  --bs-link-hover-color: var(--wbx-black);
  --bs-focus-ring-color: rgba(2, 160, 213, .45);
  --bs-success: var(--wbx-success);
  --bs-warning: var(--wbx-warning);
  --bs-danger:  var(--wbx-danger);
  --bs-border-color: var(--wbx-gray-200);
}

html { font-size: 16px; }              /* mobile base */
@media (min-width: 768px) {
  html { font-size: 15px; }            /* desktop base */
}

body { font-family: var(--wbx-font); }

/* Visible cyan focus ring on everything keyboard-focusable */
:focus-visible {
  outline: 2px solid var(--wbx-cyan);
  outline-offset: 2px;
}

/* Primary: yellow background, black text (never white on yellow) */
.btn-primary {
  --bs-btn-color: var(--wbx-black);
  --bs-btn-bg: var(--wbx-yellow);
  --bs-btn-border-color: var(--wbx-yellow);
  --bs-btn-hover-color: var(--wbx-black);
  --bs-btn-hover-bg: #E6C21C;
  --bs-btn-hover-border-color: #E6C21C;
  --bs-btn-active-color: var(--wbx-black);
  --bs-btn-active-bg: #CCAD19;
  --bs-btn-active-border-color: #CCAD19;
  --bs-btn-disabled-color: var(--wbx-black);
  --bs-btn-disabled-bg: var(--wbx-yellow);
  --bs-btn-disabled-border-color: var(--wbx-yellow);
  --bs-btn-focus-shadow-rgb: 2, 160, 213;
}

/* Secondary: black outline */
.btn-secondary {
  --bs-btn-color: var(--wbx-black);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--wbx-black);
  --bs-btn-hover-color: var(--wbx-white);
  --bs-btn-hover-bg: var(--wbx-black);
  --bs-btn-hover-border-color: var(--wbx-black);
  --bs-btn-active-color: var(--wbx-white);
  --bs-btn-active-bg: var(--wbx-gray-800);
  --bs-btn-active-border-color: var(--wbx-gray-800);
  --bs-btn-focus-shadow-rgb: 2, 160, 213;
}

/* Tap targets >= 44px */
.btn, .form-control, .form-select { min-height: 44px; }
/* Keep the label in the middle of the taller button (also icon + text, wrapped text). */
.btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; }

.wbx-topbar { background: var(--wbx-black); color: var(--wbx-white); }

/* Trademark: small "TM" at the top right of WEBIXA (always use Brand.Name). */
.wbx-tm {
  font-size: .5em;
  font-weight: 600;
  vertical-align: super;
  line-height: 0;
  margin-left: .08em;
  letter-spacing: 0;
}

/* Official logo has its own yellow background */
.wbx-logo-img { border-radius: 8px; display: block; width: auto; }