@use 'variables' as *;

:root {
  --color-dark-stronger: #{$color-dark-stronger};
  --color-light-stronger: #{$color-light-stronger};
  --color-neutral-regular: #{$color-neutral-regular};
  --color-neutral-light: #{$color-neutral-light};
  --color-neutral-lighter: #{$color-neutral-lighter};
  --color-neutral-lightest: #{$color-neutral-lightest};
  --color-primary-stronger: #{$color-primary-stronger};
  --color-primary-strong: #{$color-primary-strong};
  --color-primary-regular: #{$color-primary-regular};
  --color-primary-light: #{$color-primary-light};
  --color-primary-lighter: #{$color-primary-lighter};
  --color-primary-lightest: #{$color-primary-lightest};
  --color-secondary-stronger: #{$color-secondary-stronger};
  --color-secondary-strong: #{$color-secondary-strong};
  --color-secondary-regular: #{$color-secondary-regular};
  --color-secondary-light: #{$color-secondary-light};
  --color-secondary-lighter: #{$color-secondary-lighter};
  --color-secondary-lightest: #{$color-secondary-lightest};
  --color-tertiary-stronger: #{$color-tertiary-stronger};
  --color-tertiary-strong: #{$color-tertiary-strong};
  --color-tertiary-regular: #{$color-tertiary-regular};
  --color-tertiary-light: #{$color-tertiary-light};
  --color-tertiary-lighter: #{$color-tertiary-lighter};
  --color-tertiary-lightest: #{$color-tertiary-lightest};
  --color-neutral-inverted-default: #{$color-neutral-inverted-default};
  --color-neutral-inverted-light: #{$color-neutral-inverted-light};
  --color-neutral-inverted-lighter: #{$color-neutral-inverted-lighter};
  --color-neutral-inverted-lightest: #{$color-neutral-inverted-lightest};

  --shadow-small: #{$shadow-small};
  --shadow-default: #{$shadow-default};
  --shadow-medium: #{$shadow-medium};
  --shadow-large: #{$shadow-large};

  --font-family-sans-serif: #{$font-family-sans-serif};
  --font-family-monospace: #{$font-family-monospace};
  --font-family-body: #{$font-family-body};

  --font-weight-thin: #{$font-weight-thin};
  --font-weight-regular: #{$font-weight-regular};
  --font-weight-semi-bold: #{$font-weight-semi-bold};
  --font-weight-bold: #{$font-weight-bold};

  --font-size-xxs: #{$font-size-base * 0.625};
  --font-size-xs: #{$font-size-base * 0.75};
  --font-size-s: #{$font-size-base * 0.875};
  --font-size-m: #{$font-size-base};
  --font-size-l: #{$font-size-base * 1.125};
  --font-size-xl: #{$font-size-base * 1.25};
  --font-size-xxl: #{$font-size-base * 1.5};

  --line-height-s: #{$font-size-base * 1};
  --line-height-m: #{$font-size-base * 1.25};
  --line-height-l: #{$font-size-base * 1.5};
  --line-height-xl: #{$font-size-base * 1.75};
  --line-height-xxl: #{$font-size-base * 2};
}