/* ============================================================
   Noah's Story Charity - brand tokens
   Source of truth: BRIEF.md §1 + the approved homepage.
   :root brand variables ONLY. Fonts are loaded by the theme.
   ============================================================ */
/* ------------------------------------------------------------------
   Contrast, September 2026.
   White-on-button text was failing WCAG AA: the sage primary button
   measured 3.84:1 and the blue button 4.38:1 against white, and the muted
   text colour dropped to 3.98:1 on the pale sage field. Each colour below
   was darkened within its own hue until it cleared 4.5:1 - the smallest
   change that makes the site usable rather than a re-palette. Measured
   values are in the comments beside each token.
   ------------------------------------------------------------------ */
:root {
  /* ---- Colour (BRIEF §1 - do not add colours outside this list) ---- */
  --ns-blue: var(--hmg-brand-primary, #78B6E5);            /* primary Noah blue - footer bg, badges, accents */
  --ns-sage: var(--hmg-brand-secondary, #A0B78D);            /* sage - impact band bg, accents */
  --ns-navy: var(--hmg-brand-heading, #16324F);            /* primary text, headings */
  --ns-navy-2: #123047;          /* footer text (on blue) */
  --ns-body: var(--hmg-brand-text, #3D5D7A);            /* body copy */
  --ns-muted: #54708B;           /* was #5C7A96 - 3.98:1 on the pale sage field, under AA */           /* secondary / meta text */
  --ns-link: var(--hmg-brand-accent, #35719F);            /* links */
  --ns-blue-mid: #3B78A8;        /* mid blue accent (hero eyebrow) - was #4E92C8, 3.35:1 on white */
  --ns-blue-btn: var(--hmg-brand-info, #37729C);        /* blue button */
  --ns-blue-btn-hover: #2A5C80;  /* blue button hover */
  --ns-blue-soft: #A9CFEE;       /* soft blue rule / border */
  --ns-blue-pale: var(--hmg-brand-muted, #EAF4FC);       /* pale blue field bg */
  --ns-blue-tint: #CFE5F5;       /* tint stroke */
  --ns-green-btn: var(--hmg-brand-success, #5E7747);       /* sage/green button */
  --ns-green-btn-hover: #4C6238; /* sage/green button hover */
  --ns-green-deep: #55703F;      /* deep sage text */
  --ns-green-ink: #1F3312;       /* ink on sage (darkest) */
  --ns-green-ink-2: #28401A;     /* ink on sage (mid) */
  --ns-green-ink-3: #3A4F2C;     /* ink on sage (lightest) */
  --ns-sage-pale: #EEF3E7;       /* pale sage field bg */
  --ns-sage-soft: #C3D3AF;       /* soft sage border */
  --ns-cream: #FAF8F3;           /* warm off-white field bg */
  --ns-white: var(--hmg-brand-bg, #FFFFFF);
  --ns-yellow: var(--hmg-brand-warning, #E6C42B);          /* restrained logo yellow - star/light motif ONLY, never a surface */

  /* ---- Hairlines + borders (navy at low alpha, from approved design) ---- */
  --ns-border-card: rgba(22,50,79,.06);  /* card border */
  --ns-hairline: rgba(22,50,79,.07);     /* header / divider hairline */
  --ns-border-menu: rgba(22,50,79,.08);  /* dropdown border */
  --ns-border-ui: rgba(22,50,79,.14);    /* UI control border */

  /* ---- "Photography to be supplied" placeholder gradients (BRIEF §5) ---- */
  --ns-ph-grad-blue: linear-gradient(150deg, #DCEBF8, #C7DFF2);
  --ns-ph-grad-sage: linear-gradient(150deg, #E7EEDF, #D3E0C4);

  /* ---- Type ---- */
  --ns-display: 'Quicksand', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ns-body-font: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- Spacing scale - static steps ---- */
  --ns-s1: 4px;
  --ns-s2: 8px;
  --ns-s3: 12px;
  --ns-s4: 16px;
  --ns-s5: 24px;
  --ns-s6: 32px;
  --ns-s7: 48px;
  --ns-s8: 64px;

  /* ---- Spacing - fluid values lifted from the approved homepage ---- */
  --ns-pad-inline: clamp(18px, 4vw, 40px);    /* page gutter */
  --ns-gap-card: clamp(18px, 2vw, 26px);      /* programme card grid gap */
  --ns-gap-news: clamp(20px, 2.4vw, 32px);    /* news grid gap */
  --ns-gap-grid: clamp(22px, 2.6vw, 40px);    /* proof-point / impact grid gap */
  --ns-gap-cols: clamp(28px, 4vw, 64px);      /* two-column media/text gap */
  --ns-sec-pad: clamp(50px, 6vw, 96px);       /* standard section block padding */
  --ns-sec-pad-lg: clamp(60px, 7vw, 110px);   /* large section block padding */

  /* ---- Radius scale ---- */
  --ns-r-sm: 12px;                            /* menu item / small chip */
  --ns-r-md: 18px;                            /* dropdown panel */
  --ns-r-tile: 22px;                          /* news image tile */
  --ns-r-card: 26px;                          /* card */
  --ns-r-panel: 40px;                         /* panel */
  --ns-r-panel-fluid: clamp(26px, 3vw, 40px); /* panel, fluid (approved value) */
  --ns-r-pill: 999px;                         /* buttons, badges */

  /* ---- Shadows (from approved design) ---- */
  --ns-shadow-blob: 0 40px 80px -50px rgba(22,50,79,.5);    /* hero blob image */
  --ns-shadow-blob-2: 0 40px 76px -50px rgba(22,50,79,.55); /* feature blob image */
  --ns-shadow-card: 0 26px 50px -34px rgba(22,50,79,.45);   /* card hover lift */
  --ns-shadow-menu: 0 18px 46px -20px rgba(22,50,79,.3);    /* dropdown */
  --ns-shadow-badge: 0 22px 44px -24px rgba(22,50,79,.55);  /* circular badge */

  /* ---- Organic blob radii (reusable masks) ---- */
  --ns-blob-1: 56% 44% 48% 52% / 46% 52% 48% 54%; /* hero */
  --ns-blob-2: 48% 52% 56% 44% / 52% 46% 54% 48%; /* infinity room feature */
  --ns-blob-3: 54% 46% 44% 56% / 48% 54% 46% 52%; /* get involved */

  /* ---- Motion ---- */
  --ns-ease: cubic-bezier(.2,.7,.3,1);       /* reveal easing */
  --ns-ease-draw: cubic-bezier(.4,.1,.3,1);  /* infinity-line stroke draw */
}