@import './styles/colors.scss';
@import './styles/sizes.scss';
@import './styles/typography.scss';

:root {
  // Import colors once as variables
  --primary-main: #{$primary-main};
  --primary-light: #{$primary-light};
  --primary-dark: #{$primary-dark};

  --secondary-main: #{$secondary-main};

  --box-shadow-color: #{$box-shadow-color};
  --border-color: #{$border-color};

  --body-background-color: #{$body-background-color};
  --overlay-background-color: #{$overlay-background-color};

  --text-color: #{$text-color};
  --input-text-color: #{$input-text-color};
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.2;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

body {
  color: $text-color;
  font-family: $font-familiy;
  letter-spacing: $letter-spacing;
  font-size: $body-font-size;
  font-weight: $body-font-weight;
  line-height: $body-line-height;

  text-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
}

a {
  font-weight: 500;
  color: $primary-main;
  text-decoration: none;
  text-decoration-color: inherit;
  transition: ease 0.4s;

  &:hover {
    color: $primary-light;
    text-decoration: underline;
    text-decoration-color: inherit;
  }
}

input {
  font-family: inherit;
}