/* Design tokens. Every colour, size and space on the site comes from here. */

@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Colour: one soft grey family, one deep corporate green, one gold pop, one muted grey-green tint */
  --color-bg: #f4f5f4;
  --color-surface: #ffffff;
  --color-line: #dfe1e4;
  --color-text: #1f2226;
  --color-text-soft: #565b62;
  --color-accent: #14463c;
  --color-accent-hover: #1d5c4f;
  --color-on-accent: #ffffff;
  --color-on-accent-soft: #cfe0d9;
  --color-focus: #2f7a68;
  --color-footer: #0f352d;
  --tint-accent: #e6ebe8;

  /* One pop colour on top of the green */
  --color-pop: #e8c98a;
  --color-pop-hover: #f0d8a6;
  --color-ink: #1f2226;

  /* Type */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.75rem, 1.45rem + 1.25vw, 2.5rem);
  --text-2xl: clamp(2.5rem, 1.7rem + 3.4vw, 4.25rem);
  --weight-regular: 400;
  --weight-medium: 500;
  --leading-tight: 1.08;
  --leading-snug: 1.3;
  --leading-body: 1.6;
  --tracking-tight: -0.03em;
  --tracking-snug: -0.015em;

  /* Space: 4px base */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --section-gap: clamp(4rem, 3rem + 5vw, 7.5rem);

  /* Layout */
  --page-max: 75rem;
  --page-gutter: clamp(1.25rem, 0.5rem + 2.5vw, 2.5rem);
  --header-height: 4.5rem;

  /* Shape: 4px on cards, images and buttons */
  --radius-card: 4px;
  --radius-control: 4px;

  /* Icons and strokes */
  --icon-size: 24px;
  --stroke: 1px solid var(--color-accent);
  --marker-size: 32px;
  --lead-radius: 28px;

  /* Layout of expanding rows: title, text, toggle */
  --row-columns: 2fr 3fr 1.25rem;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 160ms;
  --duration-slow: 600ms;
}