:root {

  --lch-canvas: 1 0 0;
  --lch-ink: 0.3445 0.1482 261.78;

  --color-canvas: oklch(var(--lch-canvas));
  --color-ink: oklch(var(--lch-ink));

  --font-family-inter-display: 'Inter Display', sans-serif;
  --font-family-turbeau: 'Turbeau', sans-serif;
  --font-family-monaspace-neon: 'Monaspace Neon', monospace;

  --font-size: clamp(1.5rem, 2.225vw, 2rem);
  --font-size-xx-small: 55%;
  --font-size-x-small: 65%;
  --font-size-small: 75%;
  --font-size-large: 130%;
  --font-size-x-large: 220%;

  --letter-spacing: normal;
  --letter-spacing-loose: 0.0175em;

  --line-height: 1.3;
  --line-height-loose: 1.8;
  --line-height-tight: 1.2;

  --space-neutral: 1.5em;
  --space-xx-small: 0.4em;
  --space-x-small: 0.6em;
  --space-small: 0.8em;
  --space-medium: 1em;
  --space-large: 2em;
  --space-x-large: 3em;

  --transition: 0.1s cubic-bezier(0.37, 1, 0.74, 1);

}



@media(prefers-color-scheme: dark) {

  :root {

    --lch-canvas: 0.2756 0.0965 262.45;
    --lch-ink: 0.9609 0.0498 199.44;

  }

}