@font-face {
  font-family: "InterVariable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: "InterVariable";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/InterVariable-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "FrauncesVariable";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/FrauncesVariable-Italic.woff2") format("woff2");
}

:root {
  --font-sans:  "InterVariable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-serif: "FrauncesVariable", Georgia, "Times New Roman", serif;
  --font-mono:  ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --weight-regular:  400;
  --weight-medium:   500;

  --text-display:   clamp(26px, 1.5rem + 1vw, 36px);
  --text-title:     clamp(20px, 1.125rem + 0.75vw, 24px);
  --text-h2:        17px;
  --text-h3:        15px;
  --text-body:      16px;
  --text-back-link: 15px;
  --text-meta:      14px;
  --text-caption:   13px;
  --text-label:     11px;

  --tracking-display:    -0.028em;
  --tracking-title:      -0.022em;
  --tracking-h2:         -0.013em;
  --tracking-h3:         -0.008em;
  --tracking-body:       -0.005em;
  --tracking-meta:       -0.003em;
  --tracking-tight:      -0.01em;
  --tracking-label:      0.14em;

  --leading-tight:    1.05;
  --leading-snug:     1.15;
  --leading-headline: 1.3;
  --leading-normal:   1.4;
  --leading-relaxed:  1.5;
  --leading-body:     1.6;

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --rail-width:     180px;
  --content-column: 640px;
  --rail-gap:       64px;
  --rail-top:       24px;
  --shell-max:      100rem;
  --measure:        65ch;
  --measure-narrow: 60ch;
  --demonstration-width: 100%;

  --touch-target-min:    44px;
  --input-font-size-min: 16px;

  --color-bg:            #fbfbfd;
  --color-surface:       #ffffff;
  --color-text:          #1d1d1f;
  --color-muted:         #6e6e73;
  --color-rule:          #d2d2d7;
  --color-accent:        #0071e3;
  --color-tap-highlight: rgba(0, 113, 227, 0.12);
  --color-code-bg:       #f5f5f7;

  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 12px;

  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --ease-out:    cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}