/* The ONLY file allowed to contain colour literals. */
:root {
  --color-bg: #f4f6f8;
  --color-surface: #ffffff;
  --color-surface-2: #eef1f4;
  --color-border: #d5dbe1;
  --color-ink: #17212b;
  --color-ink-muted: #5a6875;
  --color-brand: #0f5c7a;
  --color-brand-hover: #0b4860;
  --color-brand-ink: #ffffff;
  --color-header-bg: #12303f;
  --color-header-ink: #e8f0f4;
  --color-danger-bg: #fdecec;
  --color-danger-fg: #8f1d1d;
  --color-danger-border: #f1b5b5;
  --color-focus: #2a8fb5;
  --color-link: #0b5f80;
  --color-ok-bg: #e3f4ea;
  --color-ok-fg: #17603a;
  --color-warn-bg: #fdf1d8;
  --color-warn-fg: #7a4b00;
  --color-info-bg: #e1eefb;
  --color-info-fg: #14508a;
  --color-muted-bg: #e9edf0;
  --color-muted-fg: #4c5964;
  --color-nav-bg: #1b4458;
  --color-nav-active: #0d2633;
  --color-backdrop: rgb(15 25 33 / 55%);

  --font-body: 'Assistant', system-ui, sans-serif;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.625rem;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;

  --radius: 0.5rem;
  --shadow-card: 0 1px 2px rgb(23 33 43 / 8%), 0 4px 16px rgb(23 33 43 / 6%);
}