/*
 * Design tokens.
 *
 * These mirror the Elementor kit written by tools/kit-globals.php, which in
 * turn mirrors the brand files.
 *
 * The palette is the one Aaron set in Site Settings on 2026-10-07 and the team
 * confirmed on 2026-10-14 as the real values. It sits a shade off the printed
 * colour sheet in the design pack; where the two disagree, these win.
 *
 * `--ne-forest` keeps its old name because every rule in site.css is written
 * against it. Navy is the second dark ground: the header, the footer and every
 * other dark band take it, so the page alternates rather than running green
 * the whole way down.
 *
 * Nothing here should be edited on its own: change the kit script, re-run it,
 * then mirror the change here.
 */

:root {
	/* The seven in Site Settings */
	--ne-forest:        #17271E; /* Northward Green: dark bands */
	--ne-navy:          #171C22; /* Northward Navy: header, footer, the other dark bands */
	--ne-navy-900:      #0E212A; /* the deeper navy he uses behind photographs */
	--ne-brass:         #CE8029; /* Northward Gold: accent, buttons, numerals, eyebrows */
	--ne-ivory:         #F9F4E8; /* Northward Ivory: light bands, and text on a dark one */
	--ne-teal:          #0C5859; /* Northward Teal */
	--ne-stone:         #CBB8A8; /* Northward Cream */
	--ne-walnut:        #0C5859; /* kept for the two cards that name it; now Teal */

	/* Steps off those, flattened onto the surface they sit on */
	--ne-forest-700:    #2E3D34; /* a card on a dark band */
	--ne-forest-900:    #101B15; /* hover, overlays */
	--ne-brass-600:     #A96922; /* gold hover */
	--ne-brass-700:     #7C4D19; /* gold text on a light surface: 4.9:1 or better on every light band */
	--ne-ivory-50:      #FCF9F2; /* lightest band, used for testimonials */
	--ne-ivory-200:     #E9DFD2; /* challenge cards */
	--ne-ivory-400:     #E0D3C5; /* possibility cards, services band */
	--ne-white:         #FFFFFF;

	/* Ink */
	--ne-ink:           #171C22; /* body copy on light, which is the navy */
	--ne-ink-muted:     #5D6064; /* secondary copy on light: 5.8:1 on Ivory */
	--ne-on-forest:     #F9F4E8; /* body copy on a dark band */
	--ne-on-forest-dim: #BABBAF; /* secondary copy on a dark band: 8:1 on either dark */

	/* Lines */
	--ne-line:          #DBCDC2; /* hairline on light */
	--ne-line-forest:   #414E46; /* hairline on a green band */
	--ne-line-navy:     #41454A; /* hairline on a navy band */

	/* Gold at low opacity, for the rings and glows around the dot motifs */
	--ne-brass-ring:    rgba(206, 128, 41, .22);
	--ne-brass-glow:    rgba(206, 128, 41, .45);

	/* Type */
	/* The brand's pair, as Site Settings holds it. */
	--ne-font-heading:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--ne-font-body:     'Figtree', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;

	/*
	 * Type scale (2026-09-16), from Rachel's standardised Home frame in Figma
	 * (node 405:6281). The sizes live in the Elementor kit as global type
	 * styles; these read them back so hand-written CSS uses the same scale and
	 * follows any change made in Site Settings. Fallbacks are the desktop sizes.
	 */
	--ne-fs-h1:        var(--e-global-typography-h1-font-size, 70px);
	--ne-fs-h2:        var(--e-global-typography-h2-font-size, 48px);
	--ne-fs-h3:        var(--e-global-typography-h3-font-size, 28px);
	--ne-fs-h4:        var(--e-global-typography-h4-font-size, 22px);
	--ne-fs-lead:      var(--e-global-typography-lead-font-size, 18px);
	--ne-fs-body:      var(--e-global-typography-body-font-size, 16px);
	--ne-fs-small:     var(--e-global-typography-small-font-size, 14px);
	--ne-fs-eyebrow:   var(--e-global-typography-eyebrow-font-size, 12px);
	--ne-fs-stat:      var(--e-global-typography-stat-font-size, 48px);
	--ne-fs-btn:       var(--e-global-typography-btn-font-size, 14px);
	--ne-fs-nav:       var(--e-global-typography-nav-font-size, 15px);

	/*
	 * Spacing scale. Sections take one of three vertical paddings; the large
	 * one is the 104px every section on the standardised Home frame uses, the
	 * small one its 48px stats band. Inside a section, --ne-stack separates the
	 * section head from what follows and --ne-head-gap the eyebrow, title and
	 * subtitle from each other. Cards take one of two paddings.
	 * Apply them with the classes in site.css (ne-section--lg / --md / --sm,
	 * ne-card-pad / ne-card-pad--lg) rather than per-element padding.
	 */
	--ne-section-lg:   104px;
	--ne-section-md:   72px;
	--ne-section-sm:   48px;
	--ne-gutter:       24px;
	--ne-stack:        56px;
	--ne-head-gap:     16px;
	--ne-card-pad:     32px;
	--ne-card-pad-lg:  56px;

	/* Rhythm */
	--ne-measure:       1200px;
	--ne-radius:        0;
	--ne-radius-lg:     0;
	--ne-radius-pill:   0;
}

/* The spacing scale steps down with the kit's tablet and mobile breakpoints. */
@media (max-width: 1024px) {
	:root {
		--ne-section-lg:  80px;
		--ne-section-md:  56px;
		--ne-section-sm:  40px;
		--ne-stack:       48px;
		--ne-card-pad:    28px;
		--ne-card-pad-lg: 44px;
	}
}
@media (max-width: 767px) {
	:root {
		--ne-section-lg:  64px;
		--ne-section-md:  48px;
		--ne-section-sm:  32px;
		--ne-gutter:      20px;
		--ne-stack:       40px;
		--ne-head-gap:    12px;
		--ne-card-pad:    24px;
		--ne-card-pad-lg: 28px;
	}
}