:root {
  --radius: 0.625rem;

  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);

  --padding-xs: 0.25rem;
  --padding-sm: 0.5rem;
  --padding-md: 0.75rem;
  --padding-lg: 1rem;
  --padding-xl: 1.5rem;
  --padding-xxl: 2rem;

  --margin-xs: 0.25rem;
  --margin-sm: 0.5rem;
  --margin-md: 0.75rem;
  --margin-lg: 1rem;
  --margin-xl: 1.5rem;
  --margin-2xl: 2rem;
  --margin-3xl: 2.5rem;
  --margin-4xl: 3rem;
  --margin-7xl: 5rem;

  --gap-xs: 0.25rem;
  --gap-sm: 0.5rem;
  --gap-md: 0.75rem;
  --gap-lg: 1rem;
  --gap-xl: 1.5rem;
  --gap-xxl: 2rem;

  --timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-duration: 100ms;
}