/* Compatibility layer: the original variable names, now pointing at the Pens
   Down brand tokens (brand/look-a|b/tokens.css). Pages that do not load a
   token file (the pack views) get look A values from the fallbacks. */
:root {
  --color-bg: var(--pd-bg, #F5F7FC);
  --color-surface: var(--pd-bg-raised, #E6EBF5);
  --color-text: var(--pd-ink, #1B1A17);
  --color-muted: var(--pd-ink-dim, #4A4F5E);
  --color-primary: var(--pd-accent, #1F3FBF);
  --color-primary-contrast: var(--pd-on-accent, #F5F7FC);
  --color-accent: var(--pd-accent, #1F3FBF);
  --color-danger: var(--pd-alert, #C4291F);
  --color-border: var(--pd-rule, #C9D1E3);
  --color-focus: var(--pd-focus, #1F3FBF);
  --color-dev-banner: var(--pd-alert, #C4291F);

  --font-body: var(--pd-font-text, "Atkinson Hyperlegible Next", Verdana, sans-serif);
  --font-display: var(--pd-font-display, "Archivo", "Arial", sans-serif);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-size-base: 1rem;
  --line-height: 1.55;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --radius: var(--pd-radius-tight, 2px);
  --max-width: 60rem;
}