@use "@styles/abstracts/variables" as var;

:root {
  --color-bg: #{var.$color_white};
  --color-bg-opacity: #{var.$color_white-o90};
  --color-bg-secondary: #{var.$color_grey-brighter};
  --color-fg: #{var.$color_black};
  --color-fg-light: #{var.$color_grey-dark};
  --color-fg-inverted: #{var.$color_white};
  --color-primary: #{var.$color_blue};
  --color-primary-light: #{var.$color_blue-bright};
  --color-primary-lighter: #{var.$color_blue-brighter};
  --color-primary-dark: #{var.$color_blue-dark};
  --color-primary-darker: #{var.$color_blue-darker};
  --color-secondary: #{var.$color_orange};
  --color-border: #{var.$color_grey-dark};
  --color-border-light: #{var.$color_grey};
  --color-border-lighter: #{var.$color_grey-bright};
  --color-shadow: #{var.$color_grey-dark-o70};
  --color-shadow-light: #{var.$color_grey-dark-o40};
  --color-shadow-lighter: #{var.$color_grey-dark-o20};
  --color-shadow-dark: #{var.$color_grey-dark};
}