@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: color-mix(in srgb, var(--color-blue) 70%, black);
  --color-blue-light: color-mix(in srgb, var(--color-blue) 16%, white);
  --color-blue-lightest: color-mix(in srgb, var(--color-blue) 6%, white);
  --color-ink: #2a2e35;
  --color-grey: #5e6570;
  --color-grey-light: #cdd2d9;
  --color-grey-lightest: #f4f5f7;
  --color-white: #fff;

  /* Set in the blog settings (Theme, review 3.2); these are the defaults */
  --color-page: var(--color-white);
  --color-home: var(--color-white);
  --color-navigation: var(--color-white);
  --color-button: var(--color-blue);
  --color-button-text: var(--color-white);

  --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;

  --newsletter-zoom: 0.75;
  --newsletter-height: 38rem;

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