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

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

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

  --fs-button-bold: 22px;

  --max-w-content: 640px;
  --max-w-cards: 1000px;
  --max-w-container: 1280px;
  --z-header: 2000;
  --panel-w: 310px;

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

  --leading-tight: 1.05;
  --leading-normal: 1.3;
  // --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;
  --grey-950: #222222;

  --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;
  --color-form: white;


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


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

  


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

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

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


@media #{$small}{ 
  :root {
    --fs-xsmall: 10px;
    --fs-small: 12px;
    --fs-normal: 14px;
    --fs-medium: 18px;
    --fs-big: 28px;
    --fs-xbig: 32px;

    --header-h: 60px;

    --padding-body: 16px;
  }
}



:root[data-theme="light"] {
  --grey-100: #2f2f2f;
  --grey-200: #2f2f2f;
  --grey-300: #4a4a4a;
  --grey-400: #6a6a6a;
  --grey-600: #9a9a9a;
  --grey-800: #cfcfcf;
  --grey-950: #eaeaea;

  --color-bg: #efefef;
  --color-txt: #161616;
  --color-txt-light: var(--grey-400);

  --color-accent: #ff00ff;
  --color-accent-50: #ffe9ff;
  --color-accent-100: #fdd8fd;

  --dark: white;
  --color-form: var(--color-bg);
}