base

assets/css/base/_var.scss

@@ -0,0 +1,77 @@
+: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-x-big: 38px;
+
+  --fs-button-bold: 22px;
+
+  @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-600);
+  --color-accent: #00ff00;
+  --color-accent-50: #e9ffe9;
+  --color-accent-100: #d8fdd8;
+
+
+
+  --border: 1px solid var(--color-txt);
+  --border-light: 1px solid var(--grey-800);
+
+  --header-h: 80px;
+  --header-h-shrinked: 50px;
+
+  // 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;
+  }
+}