/* Fixed tokens of the design system (tokens.json of Claude Design, A6 session 2): spacing, radii, sizes and font
 * families, once as :root variables with the same names. Colours, --radius, --font-heading and --font-body come per
 * page from src/derive-theme.ts. The nine web fonts are hosted by the app (SIL OFL 1.1, latin subset); a browser only
 * downloads a font that the page uses, so at most the two families of the theme plus IBM Plex Mono for form b. */

@font-face { font-family: 'Inter Variable'; src: url(/fonts/inter-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans Variable'; src: url(/fonts/ibm-plex-sans-latin-wght-normal.woff2) format('woff2'); font-weight: 100 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Sans 3 Variable'; src: url(/fonts/source-sans-3-latin-wght-normal.woff2) format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url(/fonts/barlow-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url(/fonts/barlow-latin-600-normal.woff2) format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Work Sans Variable'; src: url(/fonts/work-sans-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope Variable'; src: url(/fonts/manrope-latin-wght-normal.woff2) format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Serif 4 Variable'; src: url(/fonts/source-serif-4-latin-wght-normal.woff2) format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --container-single: 680px;
  --container-wide: 1160px;
  --booking-column: 380px;
  --bp-md: 640px;
  --bp-lg: 1024px;
  --touch-target: 48px;
  --focus-width: 3px;
  --logo-max-height: 40px;
  --embed-min-height: 620px;

  --font-system: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-inter: "Inter Variable", system-ui, sans-serif;
  --font-plex-sans: "IBM Plex Sans Variable", system-ui, sans-serif;
  --font-source-sans: "Source Sans 3 Variable", system-ui, sans-serif;
  --font-barlow: Barlow, system-ui, sans-serif;
  --font-work-sans: "Work Sans Variable", system-ui, sans-serif;
  --font-manrope: "Manrope Variable", system-ui, sans-serif;
  --font-source-serif: "Source Serif 4 Variable", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}