/*
 * AquaForge Global Styles
 * Buttons, badges, focus states, utility classes
 * Consumes CSS custom properties defined in theme/aquaforge-child/style.css
 */

/* Override Blocksy's font CSS variables. Blocksy's main.min.css uses
   var(--theme-font-family) for body+headings, so override both vars. */
:root,
:root body {
  --theme-font-stack-default: var(--af-font-sans) !important;
  --theme-font-family: var(--af-font-sans) !important;
}

/* ========================================
   Button System
   ======================================== */

.af-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 8px;
  font-family: var(--af-font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
  border: 2px solid transparent;
}

.af-btn:active {
  transform: translateY(1px);
}

.af-btn-primary {
  background-color: var(--af-cyan);
  color: var(--af-navy);
  border-color: var(--af-cyan);
}

.af-btn-primary:hover,
.af-btn-primary:focus {
  background-color: #22a5b3;
  border-color: #22a5b3;
  color: var(--af-navy);
  text-decoration: none;
}

.af-btn-secondary {
  background-color: transparent;
  color: var(--af-navy);
  border-color: var(--af-navy);
}

.af-btn-secondary:hover,
.af-btn-secondary:focus {
  background-color: var(--af-navy);
  color: #FFF;
  text-decoration: none;
}

.af-btn-tertiary {
  background-color: transparent;
  color: var(--af-cyan);
  border-color: transparent;
  padding: 8px 0;
}

.af-btn-tertiary:hover,
.af-btn-tertiary:focus {
  color: #22a5b3;
  text-decoration: underline;
}

/* ========================================
   Status Badges
   ======================================== */

.af-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--af-font-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.af-badge-available {
  background-color: rgb(10 143 127 / 12%);
  color: var(--af-teal);
}

.af-badge-coming {
  background-color: rgb(232 163 23 / 12%);
  color: var(--af-amber);
}

.af-badge-future {
  background-color: rgb(100 116 139 / 12%);
  color: var(--af-slate);
}

.af-badge-risk {
  background-color: rgb(217 79 79 / 12%);
  color: #D94F4F;
}

/* ========================================
   Focus States (WCAG AA)
   ======================================== */

:focus-visible {
  outline: 2px solid var(--af-cyan);
  outline-offset: 2px;
  border-radius: 2px;
}

.af-btn:focus-visible {
  outline-offset: 4px;
}

/* ========================================
   Utility Classes
   ======================================== */

.af-text-mono {
  font-family: var(--af-font-mono);
}

.af-text-navy {
  color: var(--af-navy);
}

.af-text-cyan {
  color: var(--af-cyan);
}

.af-text-slate {
  color: var(--af-slate);
}

.af-bg-navy {
  background-color: var(--af-navy);
  color: #FFF;
}

.af-bg-ice {
  background-color: var(--af-ice);
}

/* Spacing helpers (kept minimal; Blocksy provides most) */
.af-mt-large { margin-top: 48px; }
.af-mb-large { margin-bottom: 48px; }
.af-pt-large { padding-top: 48px; }
.af-pb-large { padding-bottom: 48px; }