index-website-static/assets/css/base/_var.scss

:root {
  --font: 'Executive', Arial, sans-serif;
  --title: 'System', Arial, sans-serif;

  // --fs-x-small: 10px;
  // --fs-small: 12px;
  // --fs-normal: 16px;
  // --fs-medium: 22px;
  // --fs-big: 38px;

  --fs-x-small: 10px;
  --fs-small: 12px;
  --fs-normal: 16px;
  --fs-medium: 20px;
  --fs-big: 30px;
  --fs-xbig: 38px;

  --fs-button-bold: 22px;

  --max-w-content: 700px;

  @media #{$small} {
    --fs-medium: 20px;
    --fs-big: 26px;
  }

  --leading-tight: 1;
  --leading-normal: 1.2;
  // --leading-relaxed: 1.4;
  // --leading-loose: 1.8;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 600;


  --grey-100: #d8d8d8;
  --grey-200: #c8c8c8;
  --grey-300: #b9b9b9;
  --grey-400: #969696;
  --grey-600: #6d6d6d;
  --grey-800: #383838;

  --color-bg: #161616;
  --color-txt: #ffffff;
  --color-txt-light: var(--grey-400);
  --color-accent: #00ff00;
  --color-accent-50: #e9ffe9;
  --color-accent-100: #d8fdd8;
  --dark: black;



  --border: 1px solid var(--color-txt);
  --border-light: 1px solid var(--grey-800);

  --header-h: 80px;
  --header-h-shrinked: 50px;
  --menu-w: 420px;


  // responsive
  --padding-body: 26px;

  --radius-small: 4px;
  --spacing: 30px;
  --h-block: 30px;

  --curve: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}


@media #{$small}{ 
  :root {
    --fs-x-small: 10px;
    --fs-small: 11px;
    --fs-normal: 14px;
    --fs-medium: 20px;
    --fs-big: 30px;
    --fs-x-big: 38px;
  }
}