/* Design tokens. Every color, size and font used on the site lives here. */

:root {
  --rose: #B06A6C;
  --rose-deep: #8A4E55;
  --rose-soft: #F3D6D3;
  --white: #FFFFFF;
  --bg: #F4F5F6;
  --surface: var(--white);
  --slate: #5E6670;
  --heading: #3E444B;
  --line: #E1E4E7;
  --charcoal: #2A2E33;
  --charcoal-raised: #33383E;

  --font: 'Nunito', 'Trebuchet MS', sans-serif;
  --max-width: 1040px;
  --gutter: 24px;
  --section-pad: 72px;
}

@media (min-width: 768px) {
  :root { --section-pad: 96px; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #2A2E33;
    --surface: #33383E;
    --slate: #D5D8DC;
    --heading: #F1F2F3;
    --rose-soft: #4A3638;
    --line: #40454B;
  }
}