/*
 * The Charter: design tokens.
 * This is the ONLY file allowed to contain colour values, font families or type sizes.
 * `npm run check` fails the build if any other stylesheet or template contains a raw colour.
 * Source: the Charter brief (translated from Newsletter_Spec.pdf).
 */

@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/libre-franklin-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/libre-franklin-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/libre-franklin-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/libre-franklin-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/source-serif-4-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/source-serif-4-latin-400-italic.woff2") format("woff2"); }

:root {
  /* Base colours: near-monochrome, 90% of the work */
  --ink: #1A1A1A;          /* 16.4:1 on paper */
  --paper: #FAF8F3;
  --white: #FFFFFF;
  --mid-grey: #6B6B6B;     /* 5.0:1 on paper */
  --hairline: #D9D5CC;     /* 1.4:1: decorative rules only, never UI boundaries */

  /* Signature accent. Only: masthead detail, hero stats, lead + Numbers kickers, thin accent rules. */
  --ochre: #C8911C;        /* 2.6:1: rules only, never text */
  --ochre-large: #BB871A;  /* 3.0:1: hero stat numbers (large text) only */
  --ochre-text: #926A14;   /* 4.6:1: lead kicker and The Numbers kicker (small text) */

  /* Section colours: kickers, thin rules and the footer legend only. Never fills. */
  --section-westminster: #4A5A6A; /* slate, 6.7:1 */
  --section-numbers: var(--ochre);
  --section-numbers-text: var(--ochre-text);
  --section-world: #2E6E6E;       /* muted teal, 5.5:1 */
  --section-comment: #7A2E2E;     /* oxblood, 8.8:1 */
  --section-longread: #5A3A5A;    /* deep plum, 9.0:1 */

  /* Two families. No third. */
  --font-sans: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* Type scale (web translation of the print spec) */
  --fs-masthead: clamp(2.25rem, 1rem + 5vw, 4.5rem);
  --fs-lead: clamp(2.5rem, 1rem + 6vw, 5.5rem);
  --fs-headline: clamp(1.875rem, 1.2rem + 2.8vw, 3.25rem);
  --fs-standfirst: clamp(1.2rem, 1rem + 0.6vw, 1.45rem);
  --fs-crosshead: 1.2rem;
  --fs-body: 1.125rem;
  --fs-byline: 0.8125rem;
  --fs-kicker: 0.8125rem;
  --fs-caption: 0.9rem;
  --fs-pullquote: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  --fs-stat-hero: clamp(4rem, 2rem + 8vw, 7.5rem);
  --fs-stat: var(--fs-headline); /* secondary stats reuse the story headline size: the brief sets no separate size */
  --fs-stat-caption: 0.875rem;
  --fs-small: var(--fs-stat-caption); /* reused for UI labels */

  --lh-lead: 1.02;
  --lh-headline: 1.08;
  --lh-standfirst: 1.4;
  --lh-crosshead: 1.3;
  --lh-body: 1.6;
  --lh-caption: 1.45;
  --lh-pullquote: 1.25;
  --lh-stat-hero: 0.95;
  --lh-stat-caption: 1.35;

  --track-byline: 0.05em;  /* Affinity +50 */
  --track-kicker: 0.12em;  /* Affinity +120 */

  /* Vertical rhythm: every space is a multiple of half the body line-height (1.125rem × 1.6 ÷ 2) */
  --r: 0.9rem;
  --r1: var(--r);
  --r2: calc(var(--r) * 2);
  --r3: calc(var(--r) * 3);
  --r4: calc(var(--r) * 4);
  --r6: calc(var(--r) * 6);
  --r8: calc(var(--r) * 8);

  /* Print sizes: the spec's own point sizes, used only in print.css */
  --print-masthead: 44pt;    /* 36–52pt */
  --print-headline: 28pt;    /* 26–36pt */
  --print-standfirst: 13pt;  /* 13/17pt */
  --print-leading-standfirst: 17pt;
  --print-crosshead: 11pt;
  --print-body: 9.5pt;       /* 9.5/13pt */
  --print-leading: 13pt;
  --print-byline: 8pt;
  --print-caption: 7.5pt;    /* 7.5/10pt */
  --print-leading-caption: 10pt;
  --print-pullquote: 18pt;   /* 18–24pt */
  --print-stat-hero: 56pt;   /* 56–90pt */

  /* Grid */
  --container: 75rem;     /* 1200px */
  --gutter: clamp(1rem, 2vw, 1.5rem);
  --measure: 68ch;

  /* Rules */
  --rule-hair: 1px;
  --rule-accent: 3px;
  --rule-thick: 6px;
  --focus-width: 3px;
  --underline-hover: 2px; /* links: ink underline, thicker on hover */
  --border-ui: 2px;       /* buttons and inputs: ink, well above 3:1 */
}