/**
 * NFIP Design Tokens — Institutional Trust × Contemporary Fintech
 * Variant A: Institutional Navy
 * Load BEFORE new.css / component overrides.
 */
:root {
  /* Colors */
  --nfip-color-primary: #0b3a5c;
  --nfip-color-secondary: #1f4e79;
  --nfip-color-accent: #c4782a;
  --nfip-color-bg: #f5f7fa;
  --nfip-color-surface: #ffffff;
  --nfip-color-dark: #0e2436;
  --nfip-color-text: #142033;
  --nfip-color-text-muted: #5b6777;
  --nfip-color-border: #d7dee7;
  --nfip-color-success: #1f7a4c;
  --nfip-color-warning: #b45309;
  --nfip-color-error: #b42318;
  --nfip-color-warning-bar: #9e3410;
  --nfip-color-on-accent: #ffffff;
  --nfip-color-on-dark: #f5f7fa;
  --nfip-color-on-dark-muted: #c5ced8;

  /* Typography */
  --nfip-font-heading: "Poppins", "Segoe UI", Arial, sans-serif;
  --nfip-font-body: "Open Sans", "Segoe UI", Arial, sans-serif;
  --nfip-fs-h1: 48px;
  --nfip-fs-h2: 36px;
  --nfip-fs-h3: 24px;
  --nfip-fs-h4: 20px;
  --nfip-fs-h5: 18px;
  --nfip-fs-h6: 16px;
  --nfip-fs-body: 17px;
  --nfip-fs-body-sm: 15px;
  --nfip-fs-caption: 13px;
  --nfip-fs-btn: 15px;
  --nfip-lh-tight: 1.15;
  --nfip-lh-heading: 1.25;
  --nfip-lh-body: 1.65;

  /* Layout */
  --nfip-container: 1200px;
  --nfip-container-wide: 1320px;
  --nfip-container-narrow: 760px;
  --nfip-gutter: 24px;

  /* Spacing */
  --nfip-space-1: 4px;
  --nfip-space-2: 8px;
  --nfip-space-3: 12px;
  --nfip-space-4: 16px;
  --nfip-space-5: 24px;
  --nfip-space-6: 32px;
  --nfip-space-7: 40px;
  --nfip-space-8: 48px;
  --nfip-space-9: 64px;
  --nfip-space-10: 80px;

  /* Radii / shadows */
  --nfip-radius-sm: 4px;
  --nfip-radius-md: 8px;
  --nfip-radius-lg: 12px;
  --nfip-shadow-soft: 0 4px 16px rgba(14, 36, 54, 0.08);
  --nfip-shadow-modal: 0 16px 48px rgba(14, 36, 54, 0.2);

  /* Motion */
  --nfip-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --nfip-duration: 200ms;
  --nfip-duration-slow: 350ms;

  /* UI */
  --nfip-header-height: 80px;
  --nfip-btn-height: 48px;
  --nfip-input-height: 48px;
  --nfip-z-warning: 10040;
  --nfip-z-header: 10030;
  --nfip-z-activity: 20;

  /* Breakpoint reference (for documentation / container queries later) */
  --nfip-bp-sm: 480px;
  --nfip-bp-md: 768px;
  --nfip-bp-lg: 1024px;
  --nfip-bp-xl: 1440px;
}

@media (max-width: 1024px) {
  :root {
    --nfip-fs-h1: 40px;
    --nfip-fs-h2: 30px;
    --nfip-gutter: 20px;
    --nfip-header-height: 72px;
  }
}

@media (max-width: 480px) {
  :root {
    --nfip-fs-h1: 32px;
    --nfip-fs-h2: 26px;
    --nfip-fs-h3: 20px;
    --nfip-fs-body: 16px;
    --nfip-gutter: 16px;
    --nfip-header-height: 64px;
  }
}

/* Self-hosted faces already declared in Bosa CSS — reinforce family usage */
body {
  font-family: var(--nfip-font-body);
  color: var(--nfip-color-text);
  background-color: var(--nfip-color-bg);
  max-width: 100%;
}