/* AprHeal — brand styles and Tailwind overrides
   CSS custom properties (§4.3) are the single source of truth for color.
   Reference in Tailwind: bg-[var(--navy-900)], text-[var(--green-500)], etc. */

/* ── Brand palette ──────────────────────────────────────────── */
:root {
  --navy-900: #0A2540;
  --navy-700: #1A3A5C;
  --blue-500: #0066FF;
  --blue-600: #0052CC;
  --green-500: #10B981;
  --green-50:  #ECFDF5;
  --cream-50:  #FAFAF7;
  --gray-900:  #111827;
  --gray-600:  #4B5563;
  --gray-200:  #E5E7EB;
  --red-500:   #EF4444;
  --red-700:   #B91C1C;  /* accessible red on white (6.47:1) and red-50 (5.91:1) */
  --green-700: #047857;  /* accessible green on green-50 (5.21:1) */
}

/* ── Base ────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Smooth scroll for in-page anchor links */
html {
  scroll-behavior: smooth;
  /* Offset for the sticky 64px navbar so anchors don't hide under it */
  scroll-padding-top: 72px;
}

/* ── Typography ──────────────────────────────────────────────── */
body {
  font-family: 'Inter', system-ui, sans-serif;
}

/* Tabular numerals for all calculator output figures (§4.4) */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* ── Focus rings ─────────────────────────────────────────────── */
/* Replace browser default with a brand-colored ring; never remove outlines. */
:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
}

/* ── FAQ accordion ───────────────────────────────────────────── */
/* Hide the native disclosure triangle across browsers. */
summary::-webkit-details-marker { display: none; }
summary { list-style: none; }

/* Animate the answer panel open/close */
details .faq-body {
  overflow: hidden;
}

/* Smooth chevron rotation when details is open */
details[open] .faq-chevron {
  transform: rotate(180deg);
}