/**
 * Quick Fix Force — Design Tokens
 * Ported 1:1 from the approved Base44/React source (tailwind.config.js + src/index.css).
 * Do not rename these custom properties without updating every template part.
 */
:root {
  /* Brand colors (source: tailwind.config.js `colors`) */
  --qff-navy: #0B3F78;
  --qff-navy-dark: #082D56;
  --qff-navy-deep: #062142;
  --qff-action: #F51B2A;
  --qff-action-hover: #D9101E;
  --qff-offwhite: #F7F8FA;
  --qff-charcoal: #171A1F;
  --qff-white: #FFFFFF;

  /* Charcoal / navy at common alphas (source uses text-charcoal/70, /55, /45 etc.) */
  --qff-charcoal-90: rgba(23, 26, 31, 0.9);
  --qff-charcoal-80: rgba(23, 26, 31, 0.8);
  --qff-charcoal-75: rgba(23, 26, 31, 0.75);
  --qff-charcoal-70: rgba(23, 26, 31, 0.7);
  --qff-charcoal-65: rgba(23, 26, 31, 0.65);
  --qff-charcoal-60: rgba(23, 26, 31, 0.6);
  --qff-charcoal-55: rgba(23, 26, 31, 0.55);
  --qff-charcoal-50: rgba(23, 26, 31, 0.5);
  --qff-charcoal-45: rgba(23, 26, 31, 0.45);
  --qff-charcoal-40: rgba(23, 26, 31, 0.4);
  --qff-charcoal-35: rgba(23, 26, 31, 0.35);
  --qff-navy-10: rgba(11, 63, 120, 0.1);
  --qff-navy-15: rgba(11, 63, 120, 0.15);
  --qff-navy-25: rgba(11, 63, 120, 0.25);
  --qff-navy-06: rgba(11, 63, 120, 0.06);
  --qff-navy-05: rgba(11, 63, 120, 0.05);
  --qff-white-95: rgba(255, 255, 255, 0.95);
  --qff-white-85: rgba(255, 255, 255, 0.85);
  --qff-white-70: rgba(255, 255, 255, 0.7);
  --qff-white-65: rgba(255, 255, 255, 0.65);
  --qff-white-60: rgba(255, 255, 255, 0.6);
  --qff-white-50: rgba(255, 255, 255, 0.5);
  --qff-white-40: rgba(255, 255, 255, 0.4);
  --qff-white-10: rgba(255, 255, 255, 0.1);
  --qff-white-05: rgba(255, 255, 255, 0.05);

  /* Typography (source: --font-heading / --font-body, Google Fonts Archivo + Inter) */
  --qff-font-display: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --qff-font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Radius (source: --radius: 0.5rem; Tailwind rounded-sm override = radius - 4px) */
  --qff-radius-lg: 0.5rem;
  --qff-radius-md: 0.375rem;
  --qff-radius-sm: 0.25rem;

  /* Layout */
  --qff-header-height: 68px;
  --qff-container-max: 80rem; /* max-w-7xl */
  --qff-container-pad: 1.25rem; /* px-5 */

  /* Motion (source: Reveal.jsx — framer-motion fade/translate on scroll) */
  --qff-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --qff-reveal-duration: 0.5s;
  --qff-reveal-distance: 24px;
}

@media (min-width: 640px) {
  :root { --qff-container-pad: 2rem; } /* sm:px-8 */
}
@media (min-width: 1024px) {
  :root { --qff-container-pad: 3rem; } /* lg:px-12 */
}