//Root

//main theme colors
$theme-color1: #FF6B1E;
$theme-color2: #151515;
$theme-color3: #0D0D0D;

//text colors when theme color bg
$theme-color1-text-color: #fff;
$theme-color2-text-color: #fff;
$theme-color3-text-color: #fff;

:root {
  //main theme colors
  --theme-color1: #{$theme-color1};
  --theme-color2: #{$theme-color2};
  --theme-color3: #{$theme-color3};

  //rgb version of those theme colors
  --theme-color1-rgb: #{hexToRGB($theme-color1)};
  --theme-color2-rgb: #{hexToRGB($theme-color2)};
  --theme-color3-rgb: #{hexToRGB($theme-color3)};

  //text colors when theme color bg
  --theme-color1-text-color: #{$theme-color1-text-color};
  --theme-color2-text-color: #{$theme-color2-text-color};
  --theme-color3-text-color: #{$theme-color3-text-color};

  //other colors
  --body-bg: #0D0D0D;
  --theme-color-white: #ffffff;
  --bg-color: #151515;
  --theme-color-white-rgb: 255, 255, 255;
  --theme-color-silver: #eee;
  --theme-color-black: #000000;
  --theme-color-black-rgb: 0, 0, 0;

  --bg-theme-color1: var(--theme-color1);
  --bg-theme-color2: var(--theme-color2);
  --bg-theme-color3: var(--theme-color3);
  --border-color1-rgba: rgba(255, 255, 255, 0.2);
  --border-color2-rgba: rgba(255, 255, 255, 0.13);

  //text heading color
  --text-color: #7A7A7A;
  --headings-color: #FFFFFF;
  --link-color: var(--theme-color1);
  --link-hover-color: var(--theme-color2);

  //font family
  --body-font-family: "Beatrice Trial", sans-serif;
  --heading-font-family: "Beatrice Trial", sans-serif;

  //body
  --body-font-size: 16px;
  --body-line-height: 1.9;
  --body-font-weight: 400;

  //heading font size + weight
  --line-height-heading-h1: 100%;
  --line-height-heading: 120%;
  --line-height-heading-small: 1.4em;

  --h1-font-size: 100px;
  --h2-font-size: 50px;
  --h3-font-size: 30px;
  --h4-font-size: 24px;
  --h5-font-size: 20px;
  --h6-font-size: 16px;

  --h1-font-weight: 700;
  --h2-font-weight: 500;
  --h3-font-weight: 400;
  --h4-font-weight: 500;
  --h5-font-weight: 600;
  --h6-font-weight: 700;

  //section sub title
  --sec-title-subtitle-color: #7e8596;
  --sec-title-subtitle-font-size: 16px;
  --sec-title-subtitle-font-weight: 500;
  --sec-title-subtitle-line-height: 1;

  //section title
  --sec-title-color: var(--headings-color);
  --sec-title-font-size: 50px;
  --sec-title-font-weight: var(--h2-font-weight);

  //container
  --container-width: 1320px;
  --small-container-width: 1000px;
  --large-container-width: 1550px;
  --container-pt: 120px;
  --container-pb: 120px;

  --gradient-1: linear-gradient(90deg, #88ff2a 0%, #fff 100%);
}

@import url('https://fonts.cdnfonts.com/css/beatrice-display-trial');