:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, monospace;

  /* Text */
  --text-xs: 0.75rem;
  --text-sm: 0.85rem;
  --text-base: 1rem;
  --text-xl: 1.5rem;

  @media (max-width: 767px) {
    --text-xs: 0.85rem;
    --text-sm: 0.95rem;
    --text-base: 1.1rem;
    --text-xl: 1.5rem;
  }

  /* Components */
  --aspect-trading-card: 23 / 32;

  /* OKLCH colors: Fixed */
  --lch-black: 0% 0 0;
  --lch-white: 100% 0 0;

  /* OKLCH colors: Dark mode */
  --lch-canvas: 21.15% 0.012 254.09;
  --lch-ink-darkest: 97.807% 0.029 256.847;

  /* Colors: Named */
  --color-black: oklch(var(--lch-black));
  --color-white: oklch(var(--lch-white));

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

  /* Colors: Abstractions */
  --color-canvas: oklch(var(--lch-canvas));
}