:root {
  color-scheme: light;
  --color-ink: #111110;
  --color-paper: #f5f4f0;
  --color-white: #ffffff;
  --color-surface: #eeede8;
  --color-gray-100: #e5e4df;
  --color-gray-300: #c4c3bd;
  --color-gray-500: #777771;
  --color-gray-700: #44443f;
  --color-text: var(--color-ink);
  --color-muted: var(--color-gray-500);
  --color-border: rgb(17 17 16 / 16%);
  --color-focus: #a8ff35;
  --color-product-default: var(--color-ink);
  --color-product-electronyos: #2b5cff;
  --color-product-bills: #88837d;
  --color-product-istylist: #f3d6e2;

  --font-display: "Space Grotesk", "Avenir Next", sans-serif;
  --font-body: "Space Grotesk", "Avenir Next", sans-serif;
  --font-label: "DM Mono", "SFMono-Regular", monospace;

  --text-display: clamp(3.5rem, 8.5vw, 8.5rem);
  --text-heading: clamp(2.5rem, 5vw, 5rem);
  --text-subheading: 1.25rem;
  --text-body: 1rem;
  --text-small: 0.8125rem;
  --text-label: 0.6875rem;
  --text-specification: 2rem;
  --text-navigation: 0.8125rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --content-width: 88rem;
  --content-gutter: clamp(1.25rem, 5.2vw, 5.5rem);
  --section-space: clamp(5rem, 10vw, 10rem);
  --grid-gap: clamp(1rem, 2.4vw, 2.5rem);
  --breakpoint-mobile: 48rem;
  --breakpoint-wide: 80rem;
  --focus-ring: 0 0 0 3px var(--color-ink), 0 0 0 6px var(--color-focus);
}