/* National Funding — NF Next theme
 * Mapped from NFNext-design-tokens.json (Figma: "NF UU Variables 2026 V1", NF Brand mode).
 * NF Next identity: orange #d74000/#f06400 (CTA), navy #212d4a (brand sections),
 * near-black #2a2a2a text, Inter body / Anton display type.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Anton&display=swap');

:root {
  /* Brand / navy accents */
  --variant: #212d4a;
  --primaryAccent: #212d4a;
  --secondaryAccent: #212d4a;
  --primaryAccentOpacity: #212d4a66;
  --secondaryAccentOpacity: #212d4a33;

  /* Text */
  --OnSurface: #2a2a2a; /* text.primary */
  --secondaryGrey: #525252; /* text.tertiary */
  --customGrey: #535a62; /* text.tertiary */
  --footerLightGrey: #8a9099; /* text.tertiary */
  --surfaceBackground: #ffffff; /* bg.primary */

  /* Primary / tertiary buttons -> NF Next brand orange */
  --primaryBtn: #d74000; /* brand.orange-cta */
  --primaryBtnHover: #b53600;
  --primaryBtnFocus: #f4751040; /* focus ring orange ~25% */
  --tertiaryBtn: #d74000;
  --tertiaryBtnHover: #b53600;
  --secondaryText700: #404040;
  --lightGrey: #666b73;

  /* Secondary button -> neutral */
  --secondaryBtn: #e5e5e5; /* bg.quaternary */
  --secondaryBtnHover: #212d4a;

  /* Inputs / focus ring -> orange */
  --inputAccent: #d74000; /* focus.ring / border-brand */

  /* Links -> orange, navy secondary */
  --link: #d74000; /* text.brand-primary */
  --linkOpacity: #d7400066;
  --linkSecondary: #212d4a;
  --linkHover: #a93200; /* brand.orange-label */

  /* Footer -> navy brand section */
  --footerbgLight: #212d4acc;
  --footerbgDark: #212d4a; /* bg.navy */
  --footerText: #d1d6de;

  /* Status */
  --success: #16a34a; /* fg.success */
  --error: #dc2626; /* text.error */

  /* Typography */
  --base-font: 'Inter';
}

.recommended-tab {
  /* tint SVG toward NF Next navy #212d4a */
  filter: brightness(0) saturate(100%) invert(13%) sepia(28%) saturate(1500%)
    hue-rotate(196deg) brightness(95%) contrast(92%);
}

.plaid-primary {
  /* tint SVG toward NF Next orange #d74000 */
  filter: brightness(0) saturate(100%) invert(28%) sepia(90%) saturate(3500%)
    hue-rotate(2deg) brightness(95%) contrast(105%);
}

.modal-body a {
  color: #d74000;
}

.modal-body a:hover {
  text-decoration: underline;
}

html {
  background-color: #faf9f8; /* bg.brand-cream */
  color: #2a2a2a;
}