/* Apex Advantage Design System tokens, from tokens.json (version 4, Oct 19, 2026) */
:root {
  --apex-teal-dark: #056980; --apex-teal-light: #2E939C; --apex-olive: #749200; --apex-gold: #ECBB54; --apex-navy: #04242D; --apex-white: #FFFFFF;
  --apex-gray-50: #FAFAFA; --apex-gray-100: #F5F5F5; --apex-gray-200: #E8E8E8; --apex-gray-300: #D4D4D4; --apex-gray-400: #A3A3A3; --apex-gray-500: #737373; --apex-gray-600: #525252; --apex-gray-700: #3F3F3F;
  --apex-teal-dark-hover: #045669; --apex-teal-dark-tint: #E6F0F2; --apex-teal-light-tint: #EAF4F5; --apex-gold-hover: #D4A84C; --apex-gold-tint: #FCF5E5; --apex-olive-tint: #EEF2E0; --apex-olive-text: #576E00; --apex-danger: #B84A3E;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px;
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 24px; --r-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(5, 105, 128, 0.06);
  --shadow-sm: 0 2px 4px rgba(5, 105, 128, 0.08), 0 1px 2px rgba(5, 105, 128, 0.04);
  --shadow-md: 0 6px 16px rgba(5, 105, 128, 0.10), 0 2px 4px rgba(5, 105, 128, 0.05);
  --shadow-lg: 0 12px 28px rgba(5, 105, 128, 0.12), 0 4px 8px rgba(5, 105, 128, 0.06);
  --shadow-xl: 0 24px 48px rgba(5, 105, 128, 0.16), 0 8px 16px rgba(5, 105, 128, 0.08);
  --shadow-focus: 0 0 0 3px rgba(236, 187, 84, 0.35);
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}