AdmoPro's SCSS Reset & Config.

_config.scss

@use "sass:color" as color;

$Base-File-Url: "../";
$Base-Img-Url: "#{$Base-File-Url}images/";

$Responsive-Tablet-Max: 770px;
$Responsive-Mobile-Max: 700px;
$Responsive-MobileSmall-Max: 500px;

@mixin media-max($maxwidth) {
	@media only screen and (max-width: $maxwidth) {
		@content;
	}
}

@mixin mobile() {
	@media only screen and (max-width: $Responsive-Mobile-Max) {
		@content;
	}
}

@mixin mobile_small() {
	@media only screen and (max-width: $Responsive-MobileSmall-Max) {
		@content;
	}
}

@mixin tablet() {
	@media only screen and (max-width: $Responsive-Tablet-Max) {
		@content;
	}
}

$Color-Accent: #007fff;
$Color-Accent-Light: #2792fd;
$Color-Accent-Dark: #2792fd;
$Color-Accent-Night: color.adjust($Color-Accent, $lightness: -30%);

$Color-Primary: #007fff;
$Color-Primary-Light: color.adjust($Color-Primary, $lightness: 10%);
$Color-Primary-Dark: color.adjust($Color-Primary, $lightness: -10%);
$Color-Primary-Night: color.adjust($Color-Primary, $lightness: -30%);

$Color-Secondary: #ff8000;
$Color-Secondary-Light: color.adjust($Color-Secondary, $lightness: 10%);
$Color-Secondary-Dark: color.adjust($Color-Secondary, $lightness: -10%);
$Color-Secondary-Night: color.adjust($Color-Secondary, $lightness: -30%);

$Color-Tertiary: #0ad5d5;
$Color-Tertiary-Light: color.adjust($Color-Tertiary, $lightness: 10%);
$Color-Tertiary-Dark: color.adjust($Color-Tertiary, $lightness: -10%);
$Color-Tertiary-Night: color.adjust($Color-Tertiary, $lightness: -30%);

$Color-White: #fff;
$Color-Gray-50: #f9f9f9;
$Color-Gray-100: #f2f2f2;
$Color-Gray-200: #dfdfdf;
$Color-Gray-300: #ccc;
$Color-Gray-400: #a5a5a5;
$Color-Gray-500: #7f7f7f;
$Color-Gray-600: #727272;
$Color-Gray-700: #5f5f5f;
$Color-Gray-800: #4c4c4c;
$Color-Gray-900: #3e3e3e;
$Color-Gray-950: #111;
$Color-Black: #000;

$Color-Body: #1e1e2a;
$Color-Body-Light: #2c2c3d;
$Color-Body-Dark: #fafafa;

// Light Mode
// $Color-Body: #dfdfdf;
// $Color-Body-Light: #fafafa;
// $Color-Body-Dark: #45526c;

$Color-OnBody: $Color-Gray-500;
$Color-OnBody-Light-Shade: $Color-Gray-500;
$Color-OnBody-Dark-Shade: $Color-Gray-500;

$Color-Text-Main: #f9f7f7;
$Color-Text-Secondary: #acacac;
$Color-Text-Secondary-Dark: #898989;
$Color-Text-Tertiary: #898989;
$Color-Text-Tertiary-Dark: #757575;
$Color-Text-White: #f9f7f7;
$Color-Text-Black: #111118;
$Color-Text-OnAccent: #f9f7f7;
$Color-Text-OnBody: #111118;

// Light Mode
// $Color-Text-Main: #4b4b4b;
// $Color-Text-Secondary: #898989;
// $Color-Text-Secondary-Dark: #757575;
// $Color-Text-White: #f9f7f7;
// $Color-Text-Black: #111118;
// $Color-Text-OnAccent: #f9f7f7;
// $Color-Text-OnBody: #111118;

$Color-Error: #c84662;
$Color-Success: #49b964;
$Color-Warning: #e6e634;

$Color-Yellow: #ffe600;
$Color-Red: #ec3f3f;
$Color-Red-Light: #ec3f3f;

// $Color-Shadow: #4b4b4b70;
// $Color-Instagram: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);

$Box-Shadow-Stage-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
$Box-Shadow-Stage-2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
$Box-Shadow-Stage-3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
$Box-Shadow-Stage-4: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
$Box-Shadow-Stage-5: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);

$Hover-Slight-Lighten: inset 0 0 999px 999px rgba(255, 255, 255, 0.2);

$Type-Diff: 1.32;

$Type-H1: 2rem;
$Type-H2: calc($Type-H1 / $Type-Diff);
$Type-H3: calc($Type-H2 / $Type-Diff);
$Type-H4: calc($Type-H3 / $Type-Diff);
$Type-H5: calc($Type-H4 / $Type-Diff);
$Type-H6: calc($Type-H5 / $Type-Diff);

$Type-Paragraph-Regular: 1rem;
$Type-Paragraph-Small: calc($Type-Paragraph-Regular / $Type-Diff);
$Type-Paragraph-Large: calc($Type-Paragraph-Regular * $Type-Diff);

$Type-Caption-Regular: 0.75rem;
$Type-Caption-Small: calc($Type-Caption-Regular / $Type-Diff);
$Type-Caption-Large: calc($Type-Caption-Regular * $Type-Diff);

$Type-Button-Regular: 1rem;
$Type-Button-Small: calc($Type-Button-Regular / $Type-Diff);
$Type-Button-Large: calc($Type-Button-Regular * $Type-Diff);

$Type-Input-Regular: 1rem;
$Type-Input-Small: calc($Type-Input-Regular / $Type-Diff);
$Type-Input-Large: calc($Type-Input-Regular * $Type-Diff);

$Font-Persian: "Vazirmatn FD", "Vazir FD", "Vazirmatn", "Vazir", sans-serif;
$Font-Arabic: "Noto Kufi Arabic", $Font-Persian;
$Font-English: "Segoe UI", "Segoe Pro", sans-serif;
$Font-Mono: "Consolas", monospace;

_reset.scss

@use "config" as *;

*,
*::before,
*::after {
	position: relative;
	margin: 0;
	padding: 0;
	font-family: inherit;
	// text-decoration: none;
	border: unset;
	box-sizing: border-box;
	list-style-type: none;
	user-select: none;
}

html {
	height: 100%;
	font-size: 0;
	box-sizing: border-box;
	scroll-behavior: smooth;
}

body {
	display: block;
	height: 100%;
	font-size: 0;
	box-sizing: border-box;
}

div,
section,
span,
img,
button,
figure,
i,
label,
li {
	user-select: none;
}

div,
h3,
h2,
h1,
h4,
h5,
h6,
form,
a,
input,
textarea,
body,
button,
ul,
img,
select,
option,
p,
figure {
	margin: 0;
	padding: 0;
	font-family: inherit;
	border: none;
	list-style-type: none;
}

ol li {
	display: list-item;
	list-style-type: decimal;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
input[type="text"] {
	user-select: text;
}

button,
select,
option {
	cursor: pointer;
}

*:focus,
input:focus,
button:focus,
textarea {
	outline: none;
}

input,
textarea,
button,
select,
a {
	-webkit-tap-highlight-color: transparent;
}

// TODO Implement Arrow (http://jsfiddle.net/d6jhpo7v/)

select {
	-webkit-appearance: none;
	appearance: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
label,
title,
li,
button,
input,
textarea {
	font-size: $Type-Paragraph-Regular;
}

a {
	text-decoration: none;
}

h1 {
	font-size: $Type-H1;
}

h2 {
	font-size: $Type-H2;
}

h3 {
	font-size: $Type-H3;
}

h4 {
	font-size: $Type-H4;
}

h5 {
	font-size: $Type-H5;
}

h6 {
	font-size: $Type-H6;
}

p,
li {
	font-size: $Type-Paragraph-Regular;
}

button {
	font-size: $Type-Button-Regular;
}

input,
textarea {
	font-size: $Type-Input-Regular;
}

span,
label,
title {
	font-size: $Type-Caption-Regular;
}