/* ==========================================================================
   NFCR design tokens
   Source: "NFCR Website 24 sep.html" (19 pages, 1440px canvas), values
   measured from the design's inline styles. Change a value here and it
   updates everywhere.

   Responsive values below 1440px are PROPOSED: the design has no mobile
   spec. Adjust once the designer confirms breakpoints.
   ========================================================================== */

:root {
	/* ---- Colour: brand ---- */
	--nfcr-navy:            #002C76; /* primary: headings, utility bar, dark panels, footer, section nav */
	--nfcr-navy-hover:      #00399A;
	--nfcr-orange:          #C13F00; /* CTA buttons, eyebrow links (AA on white) */
	--nfcr-orange-hover:    #A83700;
	--nfcr-accent:          #FF5012; /* eyebrow dots, progress bars: decoration only */
	--nfcr-orange-soft:     #FF8A5C; /* stat numbers and highlights on dark */
	--nfcr-orange-tint:     #FFF0E8; /* pale orange pills and "seen" markers (0.9.11) */
	--nfcr-orange-deep:     #7A2A00; /* text on the pale orange tint */
	--nfcr-orange-on-navy:  #FFB08F; /* small caps labels on navy buttons */
	--nfcr-success:         #1D7A3E; /* "Secure donation" lock line (AA on the page background) */

	/* ---- Colour: text ---- */
	--nfcr-heading-muted:   #33518C; /* first half of two-tone headings */
	--nfcr-text:            #3D4560; /* body copy */
	--nfcr-text-2:          #454D66; /* secondary copy, card meta */
	--nfcr-text-nav:        #334155;
	--nfcr-label:           #7E93BE; /* small caps labels ("Treatment depends on") */

	/* ---- Colour: surfaces & lines ---- */
	--nfcr-bg:              #EEF1F6; /* page background */
	--nfcr-wash:            #F5F7FB; /* soft tint inside a white panel: the second half of a two-tone panel (0.9.25) */
	--nfcr-surface:         #EEF1F6; /* chips, callouts, icon discs */
	--nfcr-surface-hover:   #F7F9FC;
	--nfcr-white:           #FFFFFF;
	--nfcr-line:            #E8ECF4; /* row dividers */
	--nfcr-line-chip:       #D8DFEC;
	--nfcr-line-soft:       #9FB2D6; /* soft outline buttons */
	--nfcr-track:           #E2E7F0; /* empty part of a progress bar */

	/* ---- Colour: on dark backgrounds ---- */
	--nfcr-on-dark-muted:   #93A9D3; /* first half of headings, small labels */
	--nfcr-on-dark-text:    #C8D4EC; /* body copy */
	--nfcr-on-dark-strong:  #E4EAF7;
	--nfcr-on-dark-link:    #C9D4EA;
	--nfcr-on-dark-soft:    #B9C7E4; /* footer copy and headings */
	--nfcr-on-dark-line:    rgba(255, 255, 255, .15);
	--nfcr-on-dark-wash:    rgba(255, 255, 255, .06); /* tick buttons on navy (0.9.12) */
	--nfcr-on-dark-box:     rgba(255, 255, 255, .5);  /* empty tick box on navy (0.9.12) */
	--nfcr-accent-wash:     rgba(255, 80, 18, .12);   /* ticked button on navy (0.9.12) */
	--nfcr-fade-strong:     rgba(0, 27, 74, .95);     /* navy fade at the bottom of a photo card (0.9.18) */
	--nfcr-photo-veil-top:  rgba(0, 27, 74, .82);     /* navy veil over a photo panel, top (0.9.25) */
	--nfcr-photo-veil-bottom: rgba(0, 27, 74, .94);   /* ...and bottom */
	--nfcr-fade-soft:       rgba(0, 27, 74, .3);      /* ...and where it thins out */
	--nfcr-photo-tint-top:  rgba(0, 44, 118, .16);    /* soft navy tint over article photos, top (0.9.20) */
	--nfcr-photo-tint-bottom: rgba(0, 44, 118, .34);   /* ...and bottom */
	--nfcr-accent-glow:     rgba(255, 80, 18, .35);   /* orange glow on the podcast tile (0.9.20) */
	--nfcr-bar:              rgba(255, 255, 255, .55); /* level bars on the podcast tile */
	--nfcr-bar-dim:          rgba(255, 255, 255, .35);
	--nfcr-field-wash:      rgba(255, 255, 255, .1);  /* email box on navy (0.9.20; the footer uses the same values) */
	--nfcr-field-line:      rgba(255, 255, 255, .25);

	/* ---- Typography ---- */
	--nfcr-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--nfcr-fs-h1:        60px;   /* hero title */
	--nfcr-fs-h2:        40px;   /* section title */
	--nfcr-fs-h2-sm:     34px;   /* CTA / compact title */
	--nfcr-fs-h3:        18.5px; /* card and row titles */
	--nfcr-fs-h3-lg:     20px;   /* person names (collaborator band), lead lines */
	--nfcr-fs-h3-xl:     24px;   /* titles on photo cards */
	--nfcr-fs-figure:    28px;   /* large figures in lists (donation amounts) */
	--nfcr-fs-counter:   56px;   /* big "N of 17 done" number on the checklist tracker (0.9.12) */
	--nfcr-fs-stat:      44px;   /* big number in the Donate page impact card (0.9.19) */
	--nfcr-space-l:      40px;   /* space below a section row: class nfcr-space-l (Home, 0.9.22) */
	--nfcr-space-xl:     84px;   /* ...and nfcr-space-xl: the Home page rhythm between sections */
	--nfcr-chart-3:      #3D4E75; /* third slice of the Home donut chart (0.9.22) */
	--nfcr-fs-statement: 18px;     /* mission / vision card text (0.9.25) */
	--nfcr-fs-rule-stat: 58px;     /* big numbers on the Who We Are impact band (0.9.25) */
	--nfcr-fs-timeline-year: 32px; /* year above a timeline step (0.9.25, Who We Are) */
	--nfcr-fs-band-stat: 46px;   /* big numbers in the Home navy numbers band (0.9.22) */
	/* Two-tier paragraph scale: INTRO = the paragraph(s) directly under a page or section title;
	   BODY = every other paragraph (cards, rows, lists, callouts, text blocks). */
	--nfcr-fs-intro:     17px;
	--nfcr-fs-body:      16px;
	--nfcr-fs-title-sm:  17px;   /* small card titles and names (not paragraphs) */
	--nfcr-fs-ui:        16px;   /* buttons, nav, eyebrows */
	--nfcr-fs-small:     15.5px;
	--nfcr-fs-meta:      14.5px;
	--nfcr-fs-label:     13px;   /* uppercase labels */
	--nfcr-dot:          10px;   /* orange eyebrow / ribbon dot: one size everywhere (0.9.11) */
	--nfcr-lh-tight:     1.05;
	/* Heading shrink factor for responsive titles: size = 22px + (desktop size - 22px) * k.
	   e.g. a 40px title becomes ~35.5px on tablet and ~30px on phones. */
	--nfcr-type-k:       1;
	--nfcr-lh-body:      1.72;

	/* ---- Radius ---- */
	--nfcr-r-bar:      40px;  /* nav bar, section nav */
	--nfcr-r-pill:     30px;  /* buttons */
	--nfcr-r-section:  26px;  /* panels, hero, footer */
	--nfcr-r-card:     22px;  /* link cards */
	--nfcr-r-chip:     20px;  /* chips, inner stat cards */
	--nfcr-r-callout:  16px;

	/* ---- Shadow ---- */
	--nfcr-shadow:        0 8px 26px rgba(2, 20, 60, .06);
	--nfcr-shadow-hover:  0 12px 30px rgba(2, 20, 60, .14);
	--nfcr-shadow-raised: 0 8px 26px rgba(2, 20, 60, .18);

	/* ---- Layout ---- */
	--nfcr-page-max:     1440px; /* design canvas width */
	--nfcr-gutter:       56px;   /* left/right page padding */
	--nfcr-section-gap:  52px;   /* space between sections */
	--nfcr-panel-pad-y:  34px;
	--nfcr-panel-pad-x:  38px;
	--nfcr-anchor-offset: 110px; /* clears sticky section nav on #anchor jumps */
	--nfcr-donate-gap:   40px;   /* gap between the form card and the side cards on the Donate page (0.9.19) */
	--nfcr-article-w:    1120px; /* blog article: width of header, photo, text and cards (0.9.21) */
	--nfcr-article-rail: 280px;  /* ...the side column (author, contents, 73% card) */
	--nfcr-article-gap:  44px;   /* ...and the space between side column and text */

	/* ---- Focus ---- */
	--nfcr-focus: 3px solid var(--nfcr-navy);
}

/* ---- Proposed responsive scale (design is desktop-only) ---- */
@media (max-width: 1280px) {
	:root {
		--nfcr-gutter: 40px;
	}
}

@media (max-width: 1024px) {
	:root {
		--nfcr-gutter:      32px;
		--nfcr-section-gap: 44px;
		--nfcr-space-xl:    64px;
		--nfcr-fs-h1:       48px;
		--nfcr-fs-h2:       34px;
		--nfcr-fs-h2-sm:    30px;
		--nfcr-type-k:      .75;
		--nfcr-donate-gap:  26px;
		--nfcr-article-gap: 32px;
	}
}

@media (max-width: 767px) {
	:root {
		--nfcr-gutter:      20px;
		--nfcr-section-gap: 36px;
		--nfcr-space-l:     32px;
		--nfcr-space-xl:    48px;
		--nfcr-fs-h1:       38px;
		--nfcr-fs-h2:       30px;
		--nfcr-fs-h2-sm:    26px;
		--nfcr-type-k:      .45;
		--nfcr-fs-intro:    16px;
		--nfcr-fs-figure:   24px;
		--nfcr-fs-counter:  44px;
		--nfcr-fs-stat:     36px;
		--nfcr-fs-band-stat: 34px;
		--nfcr-fs-timeline-year: 26px;
		--nfcr-fs-rule-stat: 40px;
		--nfcr-fs-statement: 16.5px;
		--nfcr-fs-h3-xl:    22px;
		--nfcr-panel-pad-y: 24px;
		--nfcr-panel-pad-x: 22px;
		--nfcr-r-section:   22px;
		--nfcr-anchor-offset: 90px;
	}
}

@media (max-width: 480px) {
	:root {
		--nfcr-gutter: 16px;
		--nfcr-fs-h1:  34px;
		--nfcr-fs-h2:  28px;
	}
}