/**
 * Design tokens — mirrors the naming used by the source site so component
 * styles resolve to identical values. One source of truth for all blocks.
 */
:root {
  /* Color primitives */
  --c-black: #000;
  --c-white: #fff;
  --c-copper: #a95228;
  --c-copper-400: #a95228;
  --c-red: #b80000;
  --c-slate-1: #515256;
  --c-slate-2: #d5d8df;
  --c-slate-3: #f4f5f7;
  --c-slate-copy: #63687e;
  --c-taupe-1: #4e3f30;
  --c-taupe-2: #9c7e60;
  --c-taupe-3: #e7d8c9;
  --c-chartreuse-1: #42520e;
  --c-chartreuse-2: #637b16;
  --c-chartreuse-3: #dbeba7;
  --c-avocado-1: #2e5f53;
  --c-avocado-2: #3d7f6f;
  --c-avocado-3: #b7d9d1;
  --c-emerald-1: #164b4a;
  --c-emerald-2: #1b5e5c;
  --c-emerald-3: #a4bfbe;
  --c-cobalt-1: #005075;
  --c-cobalt-2: #006492;
  --c-cobalt-3: #99c1d3;
  --c-gray-1: #949494;
  --c-gray: #dcdfe5;
  --c-dark-gray: #353a46;
  --c-variant-black: #202020;
  --c-yellow: #fdf147;
  --c-grey-100: #f8f8f8;
  --c-grey-200: #dcdbdc;
  --c-grey-300: #a3aaae;
  --c-highlight-light: #f4f5f7;
  --c-highlight-dark: #121317;
  --c-highlight-light-active: #e7eaee;
  --c-highlight-dark-active: #24262d;

  /* Semantic colors */
  --c-copy: var(--c-black);
  --c-background: var(--c-white);
  --c-background-highlight: var(--c-slate-3);
  --c-background-highlight-active: var(--c-highlight-light-active);
  --c-links: var(--c-black);
  --c-graphics: var(--c-black);
  --c-button-copy: var(--c-white);
  --c-button-background: var(--c-black);
  --c-footnote: var(--c-grey-300);

  /* Typography */
  --f-sans: "Guardian Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-serif: "Sanomat", Georgia, "Times New Roman", serif;
  --f-mono: sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-32: 2rem;
  --fs-36: 2.25rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-56: 3.5rem;
  --fs-64: 4rem;
  --fs-72: 4.5rem;
  --fs-80: 5rem;
  --fs-88: 5.5rem;
  --fs-96: 6rem;
  --fs-102: 6.375rem;
  --fs-104: 6.5rem;
  --fs-112: 7rem;
  --fs-128: 8rem;

  /* Spacing scale */
  --spacing-0: 0rem;
  --spacing-2: 0.2rem;
  --spacing-8: 0.5rem;
  --spacing-12: 0.75rem;
  --spacing-16: 1rem;
  --spacing-20: 1.25rem;
  --spacing-24: 1.5rem;
  --spacing-32: 2rem;
  --spacing-40: 2.5rem;
  --spacing-48: 3rem;
  --spacing-56: 3.5rem;
  --spacing-64: 4rem;
  --spacing-72: 4.5rem;
  --spacing-80: 5rem;
  --spacing-88: 5.5rem;
  --spacing-96: 6rem;
  --spacing-104: 6.5rem;
  --spacing-112: 7rem;
  --spacing-120: 7.5rem;
  --spacing-128: 8rem;
  --spacing-136: 8.5rem;
  --spacing-144: 9rem;
  --spacing-152: 9.5rem;
  --spacing-160: 10rem;
  --spacing-176: 11rem;
  --spacing-192: 12rem;
  --spacing-208: 13rem;
  --spacing-232: 14.5rem;
  --spacing-256: 16rem;
  --spacing-296: 18.5rem;

  /* Layout */
  --container-width: 20.5rem;
  --h-site-header: 7rem;
  --h-site-header--fixed: 6.375rem;
  --w-site-header-logo: 7.625rem;
  --h-site-header-logo: 3rem;
  --w-divider: var(--spacing-48);
}

/* Container width + header ramp — matches source breakpoints exactly */
@media (min-width: 26em)  { :root { --container-width: 23rem; --h-site-header: 8rem; } }
@media (min-width: 48em)  { :root { --container-width: 43rem; --h-site-header: 8.75rem; --h-site-header--fixed: 6.75rem; --w-site-header-logo: 9.5rem; --h-site-header-logo: 3.75rem; } }
@media (min-width: 80em)  { :root { --container-width: 71rem; --h-site-header: 12.75rem; --w-divider: var(--spacing-56); } }
@media (min-width: 90em)  { :root { --container-width: 79rem; --w-divider: var(--spacing-64); } }
@media (min-width: 120em) { :root { --container-width: 103rem; --w-divider: var(--spacing-88); } }