@layer base, components, pages, utilities;

:root {
  /* Verdana-like, no web font to download (H.1) */
  --font-sans: Verdana, "DejaVu Sans", Geneva, Tahoma, sans-serif;

  /* The blue is the ink of the logo, #2F528F (B.4, H.1); the rest follows from it */
  --color-blue: #2f528f;
  --color-blue-dark: #213b68;
  --color-blue-light: #dde6f3;
  --color-blue-lightest: #f2f5fa;
  --color-ink: #2a2e35;
  --color-grey: #5e6570;
  --color-grey-light: #cdd2d9;
  --color-grey-lightest: #f4f5f7;
  --color-white: #fff;

  --space: 1rem;
  --space-half: calc(var(--space) / 2);
  --space-double: calc(var(--space) * 2);
  --radius: 0.4rem;
  --content-width: 46rem;
  --wide-width: 78rem;
  --navigation-height: 3.5rem;
  --footer-height: 2.5rem;

  --text-small: 0.8rem;
  --text-normal: 0.95rem;
  --text-large: 1.3rem;
  --text-x-large: 1.8rem;
}