/* Next Step Fusion — design tokens and base rules.
   Single source for the website (loaded by main.css) and the brand book page (/brandbook/). */
:root {
  /* brand */
  --nsf-navy:       #2D3870;  /* headers, footers, hero, buttons, headings on white */
  --nsf-cyan:       #47C6EF;  /* kickers, accents, big numbers, URLs on navy; on white only bold labels, rules, bullets (see visual-guide.md) */
  --nsf-light-blue: #C4E0FD;  /* secondary text on navy; hover fill of all buttons */
  --nsf-off-white:  #F2F3F2;  /* tile and card backgrounds on white */
  --nsf-blue-gray:  #DBE2E9;  /* hairlines, image borders */
  --nsf-white:      #FFFFFF;

  /* text on white */
  --nsf-ink:        #1A1A1A;  /* body text; never pure black */
  --nsf-ink-muted:  #555555;  /* captions, references, secondary copy */

  /* type */
  --nsf-font: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;

  /* type scale (website). Fluid steps use clamp(min, vw, max). */
  --fs-display: clamp(48px, 8vw, 96px);   /* big stat numbers */
  --fs-h1:      clamp(32px, 5vw, 56px);   /* hero and page titles */
  --fs-h2:      clamp(26px, 3.6vw, 36px); /* section titles */
  --fs-h3:      clamp(20px, 2vw, 24px);   /* sub-sections, service cards */
  --fs-h4:      20px;                     /* card and list titles */
  --fs-lead:    clamp(18px, 1.6vw, 20px); /* intro paragraphs */
  --fs-body:    16px;                     /* text */
  --fs-prose:   18px;                     /* long-form article text */
  --fs-ui:      15px;                     /* buttons, inputs */
  --fs-sm:      14px;                     /* captions, footer, notes */
  --fs-xs:      12px;                     /* kickers, labels, legal */

  /* spacing scale */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-64: 64px;
  --sp-96: 96px;

  /* surfaces */
  --nsf-radius:      12px;   /* cards and panels */
  --nsf-radius-sm:   8px;    /* inputs, badges, small elements */
  --nsf-radius-pill: 999px;  /* buttons, filters, tags */
  --nsf-shadow-card:
    0 0 0 1px rgba(0,0,0,.06),
    0 1px 2px -1px rgba(0,0,0,.06),
    0 2px 4px rgba(0,0,0,.04);
  --nsf-shadow-card-hover: 0 0 0 1px rgba(0,0,0,.06), 0 8px 32px rgba(45,56,112,.16);
  --nsf-focus-ring: 0 0 0 3px rgba(45,56,112,.25);
  --nsf-focus-ring-on-navy: 0 0 0 3px rgba(255,255,255,.4);
}

/* interface details (opt-in by using the base rules or the utility classes) */
/* Balanced headings; every other block of text avoids a lonely last word (inherited from body) */
h1, h2, h3, h4 { text-wrap: balance; }
h1, h2         { line-height: 1.15; }
h3, h4         { line-height: 1.25; }
small, figcaption, dd { text-wrap: balance; }
body           { text-wrap: pretty; -webkit-font-smoothing: antialiased; }
.nsf-img-outline { outline: 1px solid rgba(0,0,0,.1); outline-offset: -1px; }