/* Base theme: black, white and greys only.
   A layout that reads here reads under any coloured theme. Type colours come
   from the admin and are layered on top of these tokens. */
:root {
  /* Surfaces and text */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-2: #ececea;
  --color-surface-band: #f2f2f0;
  --color-text: #161616;
  --color-text-strong: #2e2e2e;
  --color-text-muted: #5a5a57;
  --color-border: #d9d9d5;
  --color-border-soft: #e7e7e3;
  --color-link: #161616;
  --color-link-hover: #5a5a57;

  /* Brand */
  --color-brand: #161616;
  --color-brand-contrast: #ffffff;

  /* Fallback for anything typed before its colour is known */
  --color-type-default: #161616;
  --color-type-default-tint: #ececea;

  /* Typography: system faces only, so the engine loads nothing from outside */
  --font-body: "Atkinson Hyperlegible", Verdana, "DejaVu Sans", system-ui, sans-serif;
  --font-display: "Avenir Next", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-label: ui-monospace, "SF Mono", "Cascadia Mono", "DejaVu Sans Mono", monospace;
  --text-base: 1rem;
  --text-label: 0.75rem;
  --text-h1: 3.25rem;
  --text-h1-detail: 3.25rem;
  --text-h2: 1.625rem;

  /* Spacing and layout */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 28px;
  --space-7: 40px;
  --space-8: 56px;
  --space-9: 72px;
  --max-width: 1180px;
  --gutter: 32px;

  /* Shape */
  --radius: 10px;
  --radius-lg: 16px;
  --line-strong: 2px;
}

@media (max-width: 40rem) {
  :root {
    --text-h1: 2.5rem;
    --text-h1-detail: 2.25rem;
    --text-h2: 1.5rem;
    --gutter: 16px;
  }
}