@layer tokens {
  @font-face {
    font-family: 'Fraunces';
    src: url('../fonts/fraunces-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
  }

  @font-face {
    font-family: 'Fraunces';
    src: url('../fonts/fraunces-latin-700-normal.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
  }

  @font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
  }

  @font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-latin-600-normal.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
  }

  :root {
    --color-bg: #faf8f5;
    --color-surface: #ffffff;
    --color-ink: #1a1815;
    --color-ink-muted: #5c574f;
    --color-line: #e2ddd5;
    --color-accent: #2f4a3c;
    --color-cta: #c2410c;
    --color-cta-ink: #ffffff;

    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
    --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
    --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
    --step-2: clamp(1.45rem, 1.25rem + 1vw, 1.9rem);
    --step-3: clamp(1.75rem, 1.4rem + 1.7vw, 2.6rem);
    --step-4: clamp(2.1rem, 1.5rem + 3vw, 3.5rem);
    --step-5: clamp(2.5rem, 1.6rem + 4.5vw, 4.5rem);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;
    --space-7: 4.5rem;
    --space-8: 7rem;

    --radius: 4px;
    --measure: 62ch;
  }
}