/* =====================================================================
   IFP — Insurances for Pilots · Core tokens
   Imports webfonts via Google Fonts, declares the brand palette,
   semantic colour aliases, the type ramp, radii, shadows, and motion.
   --------------------------------------------------------------------- */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------- Brand · Navy & Blue ramp ------------------------------- */
  --ifp-navy-950: #061226;
  --ifp-navy-900: #0A1E3D;   /* primary brand */
  --ifp-navy-800: #11305F;
  --ifp-navy-700: #1A4583;
  --ifp-blue-600: #2563A8;   /* link / accent */
  --ifp-blue-500: #3B7BC4;   /* CTA accent */
  --ifp-blue-400: #6A9DD6;
  --ifp-blue-300: #9BBDE3;
  --ifp-blue-200: #C5D7EC;
  --ifp-blue-100: #E4ECF5;
  --ifp-blue-50:  #F3F6FB;

  /* ---------- Cool neutrals ------------------------------------------ */
  --ifp-ink:      #0B1422;
  --ifp-graphite: #2A3445;
  --ifp-slate:    #5C677A;
  --ifp-mist:     #A6AEBC;
  --ifp-fog:      #D8DCE3;
  --ifp-paper:    #F7F8FA;
  --ifp-white:    #FFFFFF;

  /* ---------- Semantic ----------------------------------------------- */
  --ifp-success: #2E8F6B;
  --ifp-warn:    #C58A1A;
  --ifp-error:   #C24545;

  /* ---------- Semantic foreground / background aliases --------------- */
  --fg-1: var(--ifp-ink);          /* primary text */
  --fg-2: var(--ifp-graphite);     /* secondary text */
  --fg-3: var(--ifp-slate);        /* tertiary / caption */
  --fg-4: var(--ifp-mist);         /* disabled / placeholder */
  --fg-on-navy:  var(--ifp-white);
  --fg-on-tint:  var(--ifp-navy-900);

  --bg-1: var(--ifp-white);        /* surfaces */
  --bg-2: var(--ifp-paper);        /* page */
  --bg-3: var(--ifp-blue-50);      /* tint surfaces */
  --bg-inverse: var(--ifp-navy-900);
  --border-1: var(--ifp-fog);
  --border-2: var(--ifp-blue-100);
  --border-strong: var(--ifp-navy-700);

  --link: var(--ifp-blue-600);
  --link-hover: var(--ifp-navy-900);

  /* ---------- Type families ------------------------------------------ */
  --ifp-display: 'Space Grotesk', system-ui, sans-serif;
  --ifp-body:    'Manrope',       system-ui, sans-serif;
  --ifp-mono:    'JetBrains Mono', ui-monospace, monospace;

  --serif-display: var(--ifp-display);
  --serif-body:    var(--ifp-body);
  --serif-mono:    var(--ifp-mono);

  /* ---------- Type scale (px) ---------------------------------------- */
  --fs-display-2xl: 88px;          /* cover hero */
  --fs-display-xl:  64px;          /* page H1 */
  --fs-display-lg:  56px;          /* marketing hero H2 */
  --fs-display-md:  48px;
  --fs-h1:          36px;
  --fs-h2:          24px;
  --fs-h3:          20px;
  --fs-h4:          16px;
  --fs-lead:        18px;
  --fs-body:        15px;
  --fs-small:       13px;
  --fs-mono:        12px;
  --fs-eyebrow:     11px;
  --fs-micro:       10px;

  /* ---------- Spacing scale (4 / 8 base) ----------------------------- */
  --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;

  /* ---------- Radii --------------------------------------------------- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ---------- Elevation / shadow ------------------------------------- */
  --shadow-1: 0 1px 2px rgba(10,30,61,.06), 0 1px 1px rgba(10,30,61,.04);
  --shadow-2: 0 6px 16px rgba(10,30,61,.08), 0 2px 4px rgba(10,30,61,.05);
  --shadow-3: 0 20px 48px rgba(10,30,61,.14), 0 6px 12px rgba(10,30,61,.08);
  --focus-ring: 0 0 0 4px rgba(59,123,196,.16);

  /* ---------- Motion -------------------------------------------------- */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-slow: 320ms;
}

/* ----------------------------------------------------------------------
   Semantic element styles · use these instead of magic numbers.
   ---------------------------------------------------------------------- */

html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ifp-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--fg-1);
  background: var(--bg-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01","cv11";
}

h1, h2, h3, h4, h5 {
  font-family: var(--ifp-display);
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--ifp-navy-900);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-display-xl); line-height: 1.02; letter-spacing: -.035em; font-weight: 600; }
h2 { font-size: var(--fs-h1);         line-height: 1.10; }
h3 { font-size: var(--fs-h2);         line-height: 1.20; }
h4 { font-size: var(--fs-h4);         line-height: 1.30; letter-spacing: -.005em; }

p     { font-family: var(--ifp-body); font-size: var(--fs-body); line-height: 1.55; color: var(--fg-2); margin: 0; text-wrap: pretty; }
.lead { font-size: var(--fs-lead); line-height: 1.5; max-width: 64ch; }
small { font-size: var(--fs-small); color: var(--fg-3); }

a       { color: var(--link); text-decoration: none; transition: color var(--t-fast) var(--ease-out); }
a:hover { color: var(--link-hover); }

code, kbd, samp, pre {
  font-family: var(--ifp-mono);
  font-size: var(--fs-mono);
  color: var(--ifp-blue-600);
}

/* Eyebrow — the recurring mono uppercase tag with a leading rule */
.eyebrow {
  font-family: var(--ifp-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ifp-blue-600);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  display: inline-block;
}

::selection { background: var(--ifp-blue-200); color: var(--ifp-navy-900); }