/* FPS design tokens. Source: 02-source-docs/FPS-VERIFIED-FACTS.md, Brand section. */
/* Jost, self-hosted. Licensed under the SIL Open Font License: see ../fonts/OFL.txt */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jost-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/jost-latin-600-normal.woff2') format('woff2');
}

:root {
  /* Colour */
  --brand-blue: #3098D5;  /* Accents, rules, large display, icons, focus ring. Below 3:1 on surface and tint. */
  --action-blue: #1B6FA3; /* Links and primary buttons, on white, surface and tint only. Never on charcoal. */
  --charcoal: #231F20;    /* Text, headings, dark sections, footer. */
  --tint: #E6F4FC;        /* Light feature sections. */
  --white: #FFFFFF;
  --surface: #F5F6F7;
  --border: #E1E3E6;      /* Decorative only. Form controls use --muted. */
  --text-secondary: #545151; /* Supporting paragraphs. Lightest charcoal tint at 7:1 or more: white 7.86, surface 7.26, tint 7.00. */
  --rule-on-dark: rgba(255, 255, 255, 0.15);
  --muted: #737071;       /* Captions, meta and small labels only. White 4.90, surface 4.53. Fails on tint (4.37). */

  /* Context values, overridden by the section variants in components.css */
  --text: var(--charcoal);
  --copy: var(--text-secondary);
  --caption: var(--muted);
  --link: var(--action-blue);
  --accent-text: var(--brand-blue);
  --focus: var(--brand-blue);

  /* Type */
  --font-heading: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --text-base: 1.0625rem;  /* 17px */
  --text-small: 0.875rem;  /* 14px */
  --text-label: 0.8125rem; /* 13px */
  --leading: 1.65;
  --measure: 70ch;
  /* Fluid between 360px and 1280px viewports */
  --h1: clamp(2.25rem, 1.761rem + 2.174vw, 3.5rem);   /* 36 to 56px */
  --h2: clamp(1.75rem, 1.456rem + 1.304vw, 2.5rem);   /* 28 to 40px */
  --h3: clamp(1.25rem, 1.152rem + 0.435vw, 1.5rem);   /* 20 to 24px */

  /* Spacing: 4px base */
  --space-1: 0.25rem; /* 4 */
  --space-2: 0.5rem;  /* 8 */
  --space-3: 0.75rem; /* 12 */
  --space-4: 1rem;    /* 16 */
  --space-6: 1.5rem;  /* 24 */
  --space-8: 2rem;    /* 32 */
  --space-12: 3rem;   /* 48 */
  --space-16: 4rem;   /* 64 */
  --space-24: 6rem;   /* 96 */

  /* Layout */
  --content-max: 1200px;
  --gutter: var(--space-4);
  --section-y: var(--space-16);

  /* Shape */
  --radius: 4px;
  --control-height: 48px;
}

@media (min-width: 768px) {
  :root {
    --gutter: var(--space-6);
    --section-y: var(--space-24);
  }
}