/*
  Design tokens: the one place for the theme of the site.
  Change a color, a font, or a size here, and the full site changes.
  When a design comes from Figma, put the Figma variables here.
*/

:root {
  /* Colors */
  --color-background: #fbfaf7;
  --color-surface: #f1efe9;
  --color-text: #1d1c1a;
  --color-text-muted: #5f5c55;
  --color-border: #dedad1;
  --color-accent: #3a5bd9;
  --color-accent-contrast: #ffffff;
  --color-focus: #3a5bd9;

  /* Fonts. To use a web font, put the font files in src/assets/fonts/
     and add an @font-face rule at the top of site.css. */
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  /* Type scale */
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-2xl: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  --text-hero: clamp(2.5rem, 1.6rem + 4vw, 4.75rem);
  --line-height-body: 1.65;
  --line-height-heading: 1.12;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;

  /* Layout */
  --width-text: 44rem;
  --width-page: 72rem;
  --width-wide: 80rem;
  --radius: 0.75rem;
}