:root {
  --color-product-paper: oklch(14% 0.012 55);
  --color-product-paper-raised: oklch(18% 0.014 55);
  --color-product-ink: oklch(95% 0.008 75);
  --color-product-muted: oklch(75% 0.012 65);
  --color-product-rule: oklch(34% 0.018 55);
  --color-product-accent: oklch(76% 0.16 65);
  --color-product-accent-ink: oklch(16% 0.015 55);
  --color-product-focus: oklch(82% 0.17 72);
  --font-product-display: "Bahnschrift", "Arial Narrow", ui-sans-serif, sans-serif;
  --font-product-body: Inter, ui-sans-serif, system-ui, sans-serif;

  --space-product-3xs: 0.25rem;
  --space-product-2xs: 0.5rem;
  --space-product-xs: 0.75rem;
  --space-product-sm: 1rem;
  --space-product-md: 1.5rem;
  --space-product-lg: 2rem;
  --space-product-xl: 3rem;
  --space-product-2xl: 4rem;

  --text-product-xs: 0.75rem;
  --text-product-sm: 0.875rem;
  --text-product-base: 1rem;
  --text-product-md: 1.125rem;
  --text-product-display: clamp(2.75rem, 5vw, 4.75rem);

  --ease-product-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-product-micro: 120ms;
  --dur-product-short: 220ms;
  --rule-product-hairline: 1px;
  --radius-product-action: 0.5rem;
  --radius-product-media: 0.75rem;
}