/* ==========================================================================
   Assistive Engineering Solutions — Design Tokens
   Every color, font, size, and spacing value used across the site is
   defined here. No new values should be introduced in styles.css or
   responsive.css directly — add them here first, then reference the
   variable.
   ========================================================================== */

/* Load brand fonts. This @import was previously missing entirely, which
   is why "Poppins" and "IBM Plex Sans" below were silently falling back
   to the system font. This is the one genuine bug fix in this file —
   everything else below is unchanged from the originally approved
   design system. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {

  /* --- Brand Colors -------------------------------------------------- */
  --color-brand-blue: #0b3c9b;
  --color-brand-gold: #f4b41a;

  --color-ink: #12173a;

  --color-bg: #ffffff;
  --color-bg-alt: #faf9f7;

  /* #d5d5d5 previously failed the WCAG 3:1 non-text contrast minimum
     (measured 1.47:1) — nearly invisible against white, which is part
     of why cards and form fields looked flat/undefined. This shade
     passes at 3.2:1 while staying a neutral, unobtrusive gray. */
  --color-border: #8b909a;
  --color-border-focus: var(--color-brand-blue);

  --color-gold-tint: #fdf3de;

  /* --- Typography ------------------------------------------------------ */
  --font-heading: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;

  --text-h1: 2.5rem;
  --text-h2: 1.875rem;
  --text-h3: 1.375rem;
  --text-h4: 1.125rem;
  --text-body: 1rem;

  --text-h1-mobile: 2rem;
  --text-h2-mobile: 1.5rem;

  --line-height-body: 1.6;
  --line-height-heading: 1.15;

  --weight-heading-bold: 700;
  --weight-heading-semibold: 600;
  --weight-body-regular: 400;

  /* --- Spacing scale ---------------------------------------------------- */
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-xl-mobile: 2.5rem;

  /* --- Radius & shadow ----------------------------------------------------
     Restored to the originally locked value. Buttons and images use a
     small, consistent radius — never pill-shaped, per the locked
     design system (Section 3: "Corners: Slightly rounded, not
     pill-shaped"). */
  --radius-standard: 6px;
  --radius-pill: 999px;
  --shadow-card: 0 2px 10px rgba(11, 60, 155, 0.12);

  /* --- Borders ------------------------------------------------------- */
  --border-width-standard: 2px;
  --border-width-hairline: 1px;

  /* --- Focus outline ------------------------------------------------- */
  --focus-outline-color: #0b3c9b;
  --focus-outline-width: 3px;
  --focus-outline-offset: 3px;

  /* --- Breakpoints (reference only, see responsive.css) -------------------
     Mobile:  up to 640px
     Tablet:  641px – 1024px
     Desktop: 1025px and above
     ------------------------------------------------------------------ */

  --z-header: 100;
  --z-dropdown: 200;
  --z-mobile-menu: 300;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}