/* ============================================================
   Airport Compliance page — scoped design system
   Everything is namespaced under .ac-root so it never leaks onto
   other pages. Supports the site's light/dark toggle: the site adds
   a `.dark` class on <html> for dark mode (default), none for light.
   ============================================================ */

/* ---- Light theme (default — <html> has no .dark class) ---- */
.ac-root {
  --background: 210 40% 98%;
  --foreground: 222 47% 11%;
  --muted-foreground: 215 16% 47%;
  --border: 214 32% 88%;
  --primary: 217 91% 52%;
  --primary-foreground: 0 0% 100%;
  --primary-glow: 199 89% 44%;
  --surface: 0 0% 100%;
  --secondary: 210 40% 94%;

  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Poppins', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---- Dark theme (<html> has .dark class) ---- */
.dark .ac-root {
  --background: 222 47% 5%;
  --foreground: 210 40% 98%;
  --muted-foreground: 215 20% 65%;
  --border: 215 25% 18%;
  --primary: 217 91% 60%;
  --primary-foreground: 0 0% 100%;
  --primary-glow: 199 89% 60%;
  --surface: 220 26% 11%;
  --secondary: 217 33% 17%;
}

/* ---- Fonts + fluid heading sizes (match home, both modes) ---- */
.ac-root h1,
.ac-root h2,
.ac-root h3,
.ac-root h4 {
  font-family: 'Poppins', sans-serif;
}
.ac-root h1 { font-size: clamp(1.875rem, 1rem + 4vw, 3.5rem); line-height: 1.12; }
.ac-root h2 { font-size: clamp(1.5rem, 1rem + 2.2vw, 2.75rem); line-height: 1.16; }
.ac-root h3 { font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem); line-height: 1.3; }

/* ---- Custom utilities — light defaults ---- */
.ac-root .glass {
  background-color: hsl(0 0% 100% / 0.65);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid hsl(214 32% 80% / 0.7);
}
.ac-root .grid-bg {
  background-image:
    linear-gradient(to right, hsl(222 47% 11% / 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, hsl(222 47% 11% / 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
}
.ac-root .text-gradient {
  background-image: linear-gradient(135deg, hsl(222 47% 11%), hsl(215 16% 40%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ac-root .text-gradient-blue {
  background-image: linear-gradient(120deg, hsl(199 89% 48%), hsl(217 91% 52%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ac-root .bg-gradient-primary {
  background-image: linear-gradient(135deg, hsl(217 91% 55%), hsl(199 89% 50%));
}
.ac-root .shadow-glow { box-shadow: 0 0 40px -8px hsl(217 91% 55% / 0.35); }
.ac-root .shadow-card { box-shadow: 0 24px 60px -24px hsl(215 40% 45% / 0.25); }

/* ---- Custom utilities — dark overrides ---- */
.dark .ac-root .glass {
  background-color: hsl(220 26% 11% / 0.55);
  border: 1px solid hsl(0 0% 100% / 0.08);
}
.dark .ac-root .grid-bg {
  background-image:
    linear-gradient(to right, hsl(0 0% 100% / 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, hsl(0 0% 100% / 0.04) 1px, transparent 1px);
}
.dark .ac-root .text-gradient {
  background-image: linear-gradient(135deg, hsl(210 40% 98%), hsl(215 25% 72%));
}
.dark .ac-root .text-gradient-blue {
  background-image: linear-gradient(120deg, hsl(199 89% 66%), hsl(217 91% 60%));
}
.dark .ac-root .bg-gradient-primary {
  background-image: linear-gradient(135deg, hsl(217 91% 60%), hsl(199 89% 58%));
}
.dark .ac-root .shadow-glow { box-shadow: 0 0 40px -8px hsl(217 91% 60% / 0.45); }
.dark .ac-root .shadow-card { box-shadow: 0 24px 60px -24px hsl(222 70% 2% / 0.85); }