/* =========================================================
   UN Geneva — 2025 Annual Report
   Design tokens

   Colour values are derived from the printed report:
   UN blue #009EDB and taupe #8A826E on warm paper #EEECEA.
   Where the print values fail WCAG AA on screen, an
   accessible sibling token is provided and the print value
   is kept for large display type and graphics only.
   Measured ratios are noted inline.
   ========================================================= */

:root{
  /* ---- The brand blue ----
     #009EDB carries the whole site — titles, figures, fills, accents. By
     client decision there are no darker variants and no second blue for
     emphasis. It measures 3.04:1 on white, 2.58:1 on paper and 1.78:1 on
     the taupe panel; tools/contrast-check.py records where that falls below
     WCAG AA. */
  --blue:            #009EDB;

  /* The one sanctioned tint, and only for the "Chapter N" labels on the
     taupe panel: the printed report switched those to a lighter blue, and
     the site follows it. 2.83:1 on --taupe-panel — still short of the 3:1
     bar for large text, though a long way up from the brand blue's 1.78:1.
     #A0C6E8 would clear it at 3.02:1 and is all but indistinguishable. */
  --blue-light:      #97C0E6;

  /* ---- Grounds ---- */
  --taupe:           #8A826E;  /* print taupe — graphics + large type */
  --taupe-dark:      #6D6656;  /* eyebrows/labels: 5.70:1 white, 4.84:1 paper */
  --taupe-panel:     #6F6A5B;  /* chapter panel ground: white text = 5.40:1 */

  /* ---- Neutrals ---- */
  --paper:           #EEECEA;
  --white:           #FFFFFF;
  --ink:             #16191C;
  --ink-soft:        #3F4345;  /* 8.49:1 on paper */
  --ink-muted:       #5A5E60;  /* 5.56:1 on paper */

  --line:            rgba(22, 25, 28, .14);
  --line-strong:     rgba(22, 25, 28, .28);
  --line-on-taupe:   rgba(255, 255, 255, .28);

  /* ---- Type ----
     Adobe kit chx2nlj ships neue-frutiger-world at 400 and 600 ONLY.
     Never request 700+ or the browser will synthesise a fake bold. */
  --font-display: "neue-frutiger-world", "Frutiger Fallback",
                  "Frutiger LT Std", "Helvetica Neue", Arial, sans-serif;

  /* The serif, now licensed through kit chx2nlj as "times-new-roman"
     (regular, italic, bold, bold italic). The Adobe family name is the
     lowercase hyphenated one and is distinct from the local system face
     that follows it as a fallback. Bold is real here, so .stat__num at
     700 is no longer synthesised. */
  --font-serif:   "times-new-roman", "Times New Roman", Times, Georgia, serif;

  --fw-regular: 400;
  --fw-semi:    600;   /* maximum available weight */
  /* Section statements are meant to be Frutiger BOLD. Kit chx2nlj only has
     400 and 600, so this is 600 for now. Once Neue Frutiger World Bold is
     added to the kit, change this to 700 — nothing else needs touching. */
  --fw-statement: 600;

  /* ---- Type scale ---- */
  --fs-hero:    clamp(2rem, 5.2vw, 4.75rem);
  --fs-section: clamp(1.9rem,  3.6vw, 3.25rem);
  --fs-chapter: clamp(1.6rem,  2.6vw, 2.5rem);
  --fs-lead:    clamp(1.1rem,  1.5vw, 1.35rem);
  --fs-body:    clamp(1rem,    1.05vw, 1.125rem);
  --fs-small:   .875rem;
  --fs-label:   .8125rem;

  --lh-tight:   1.08;
  --lh-snug:    1.25;
  --lh-body:    1.7;
  --tracking-label: .13em;

  /* ---- Layout ---- */
  --gutter:     clamp(1.25rem, 5vw, 5rem);
  --measure:    62ch;

  /* Content column. Sections stay full-bleed so backgrounds and imagery
     run edge to edge; this inset centres their CONTENT and caps it at
     --content-max. Below that width the gutter wins, so nothing touches
     the screen edge on small screens. */
  --content-max:   1400px;
  --content-inset: max(var(--gutter), calc((100% - var(--content-max)) / 2));
  --header-h:   clamp(60px, 7vw, 76px);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(.22, .7, .2, 1);
  --ease-in-out:cubic-bezier(.65, 0, .35, 1);
  --dur-xs:     .16s;
  --dur-s:      .28s;
  --dur-m:      .55s;
  --dur-l:      .9s;
  --dur-hero:   1.2s;
  --stagger:    80ms;
}

/* Metric-matched fallback so the Adobe kit swapping in causes no
   layout shift. Tuned to Neue Frutiger World's proportions. */
@font-face{
  font-family: "Frutiger Fallback";
  src: local("Helvetica Neue"), local("HelveticaNeue"), local("Arial");
  size-adjust: 99%;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}

/* The report is a print artefact on warm paper; it has no dark mode. */
:root{ color-scheme: light; }