@font-face {
  font-family: "Google Sans Flex";
  src: url("/assets/fonts/google-sans-flex-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
}

:root {
  --color-white: #ffffff;
  --color-red: #b52a22;
  --color-red-dark: #8f201a;
  --color-yellow: #f4c64c;
  --color-yellow-soft: #fff7d9;
  --color-ink: #1d1d1b;
  --color-ink-soft: #64635f;
  --color-surface: #f7f6f2;
  --color-line: #e7e5df;
  --color-line-strong: #cbc8c0;
  --color-success: #26734a;
  --color-danger: #9f281f;
  --font-sans: "Google Sans Flex", "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);
  --ink: var(--color-ink);
  --ink-soft: var(--color-ink-soft);
  --ember: var(--color-red);
  --ember-deep: var(--color-red-dark);
  --line: var(--color-line);
  --line-strong: var(--color-line-strong);
  --danger: var(--color-danger);
  --success: var(--color-success);
  --space-2xs: 0.375rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: clamp(1.5rem, 3vw, 3rem);
  --space-lg: clamp(3rem, 6vw, 6rem);
  --space-xl: clamp(4.5rem, 10vw, 10rem);
  --section-space: clamp(4rem, 9vw, 9rem);
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --container: 90rem;
  --reading: 58ch;
  --radius-sm: 1.125rem;
  --radius-md: 1.75rem;
  --radius-lg: 2.125rem;
  --radius-button: 0.75rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 220ms var(--ease);
  --transition: 360ms var(--ease);
  --header-height: 4.5rem;
  --z-header: 20;
  --z-menu: 30;
}

@media (min-width: 48rem) {
  :root {
    --gutter: clamp(2rem, 4vw, 4rem);
    --header-height: 5rem;
  }
}