/* privacyfence.eu design tokens: colour, type scale, spacing and shape.

   The one source of these values for every page on the site: the hand-written pages load it
   before chrome.css and styles.css, and the /docs/ theme loads it through its extra_css hook
   (website/_docs/), so the documentation and the marketing pages read as one site.
   What each token is for is described in styles.css's header comment (rule 6). */

:root {
  /* Colour */
  --bg: #f6f8fb;
  --surface: #ffffff;
  --surface-soft: #eef3f8;
  --ink: #14212b;
  --ink-soft: #43535f;
  --muted: #60707d;
  --line: #dbe3e9;
  --accent: #167a70;
  --accent-dark: #0e5f57;
  --accent-soft: #e1f2ef;
  --shadow: 0 22px 70px rgba(25, 48, 62, .11);

  /* Type scale */
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --step-h1: clamp(40px, 6vw + 8px, 82px);
  --step-h2: clamp(30px, 4vw, 55px);
  --step-h3: 21px;
  --step-lede: clamp(17px, 1vw + 12px, 20px);
  --step-body: 16px;
  --step-small: 14px;
  --measure: 70ch;

  /* Spacing */
  --space-2xs: 6px;
  --space-xs: 10px;
  --space-s: 16px;
  --space-m: 24px;
  --space-l: 34px;
  --space-xl: clamp(48px, 7vw, 70px);
  --space-section: clamp(72px, 9vw, 120px);
  --gutter: clamp(15px, 3vw, 24px);

  /* Shape */
  --radius: 22px;
  --radius-s: 10px;
  --tap: 44px;
}