@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/C.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/S.woff2') format('woff2');
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}
:root {
  --font-heading: 'Clash Display', Arial, sans-serif;
  --font-body: 'Satoshi', Arial, sans-serif;
  --color-yellow: #fbee1d;
  --color-yellow-soft: #ffe999;
  --color-paper: #fff;
  --color-surface: #f8f7f5;
  --color-text: #272626;
  --color-dark: #121212;
  --color-ink: #03071e;
  --color-muted: #62605e;
  --color-border: #ddd;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --container-width: 90rem;
  --gutter: clamp(1.25rem, 3vw, 3rem);
  --section-space: clamp(3rem, 6vw, 6rem);
  --grid-gap: clamp(1.5rem, 4vw, 4.5rem);
  --radius-pill: 999px;
  --radius-field: 1.375rem;
  --shadow-card: 0 5px 11px rgb(0 0 0 / 18%);
}