:root {
  //paragraphe spacing
  --paragraphe-spacing-body-sm: 16px;
  --paragraphe-spacing-body-md: 18px;
  --paragraphe-spacing-body-lg: 20px;

  --paragraphe-spacing-display-sm: 32px;
  --paragraphe-spacing-display-md: 24px;
  --paragraphe-spacing-display-sm: 16px;

  //spacing
  --typography-spacing-xxxs: var(--scale-50, 2px);
  --typography-spacing-xxs: var(--scale-100, 4px);
  --typography-spacing-xs: var(--scale-200, 8px);
  --typography-spacing-sm: var(--scale-300, 12px);
  --typography-spacing-md: var(--scale-400, 16px);
  --typography-spacing-lg: var(--scale-600, 24px);
  --typography-spacing-xl: var(--scale-900, 32px);
  --typography-spacing-xxl: var(--scale-1200, 48px);
  --typography-spacing-xxxl: var(--scale-1600, 64px);

  // line height display
  --line-height-display-h1: 76px;
  --line-height-display-h2: 54px;
  --line-height-display-h3: 38px;
  --line-height-display-h4: 26px;

  // line height heading
  --line-height-heading-h1: 38px;
  --line-height-heading-h2: 33px;
  --line-height-heading-h3: 28px;
  --line-height-heading-h4: 24px;

  // line height body
  --line-height-body-xs: 20px;
  --line-height-body-sm: 22px;
  --line-height-body-md: 26px;
  --line-height-body-lg: 28px;
  --line-height-body-xl: 32px;
}