@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/work-sans/work-sans-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/work-sans/work-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/work-sans/work-sans-600.woff2') format('woff2');
}

:root {
  --font-body: 'Work Sans', sans-serif;
  --font-heading: 'Work Sans', sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;

  --radius-1: 6px;
  --radius-2: 12px;

  --line-height-body: 1.6;
  --line-height-heading: 1.2;

  --focus-ring-color: rgba(31, 111, 235, 0.35);
  --focus-ring: 0 0 0 3px var(--focus-ring-color);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: #f8f7f4; }
html.mode-dark { background: #0b0f14; }
body { line-height: var(--line-height-body); font-family: var(--font-body); }
body.theme-dark { background: #0b0f14; }
body.theme-light { background: #f8f7f4; }
button, input, select, textarea { font-family: var(--font-body); }