@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

:root{
/* colors */
/* Main */
--clr-bg-a: #0c141d;
--clr-bg-a1: #1F2327;
--clr-bg-a2: #2E3439;

--clr-bg-b: #020e16;
--clr-bg-b1: #1C2125;
--clr-bg-b2: #2A3339;

--clr-line-a: #3E4142;
--clr-line-b: #7D7E7F;

/* Text colors */
--clr-text-a0: #FFFFFF;
--clr-text-a1: #EDEDED;
--clr-text-a2: #DBDBDB;
--clr-text-a3: #C8C8C8;

--gray10: hsl(0, 0%, 10%);
--gray30: hsl(0, 0%, 30%);
--gray50: hsl(0, 0%, 50%);
--gray70: hsl(0, 0%, 70%);
--gray90: hsl(0, 0%, 90%);

/* Theme accent color a */
--clr-accent-a0: #E57A2D;
--clr-accent-a1: #E88F4B;
--clr-accent-a2: #E99759;
--clr-accent-a3: #EBA067;
--clr-accent-a4: #EDA974;
--clr-accent-a5: #EFB182;

/** Theme accent color b */
--clr-accent-b0: #3D9DE6;
--clr-accent-b1: #4BA4E8;
--clr-accent-b2: #59ABE9;
--clr-accent-b3: #67B2EB;

/* landing page */
--ff: "Inter", sans-serif;
--h1: bold 3rem/1.2em var(--ff);
--h2: bold 2.25rem/1.2em var(--ff);
--h3: bold 1.5rem/1.2em var(--ff);
--h4: bold 1.12rem/1.6em var(--ff);
--big: 1rem/1.6em var(--ff);
--p: .8rem/1.6em var(--ff);
--small: .75rem/1.8em var(--ff);
--xsmall: .7rem/1.9em var(--ff);
/* Sidebar label preset*/
--sidebar-label-font: .8rem/1.6em var(--ff);

--shadow-color: 0deg 0% 0%;
  --shadow-elevation-low:
    0px 1px 1.5px hsl(var(--shadow-color) / 0),
    -0.1px 2.3px 3.5px hsl(var(--shadow-color) / 0.35),
    -0.2px 5px 7.5px hsl(var(--shadow-color) / 0.69);
  --shadow-elevation-high:
    0px 1px 1.5px hsl(var(--shadow-color) / 0),
    -0.4px 15.1px 22.7px hsl(var(--shadow-color) / 0.04),
    -0.7px 27.3px 41px hsl(var(--shadow-color) / 0.08),
    -1.1px 40.1px 60.2px hsl(var(--shadow-color) / 0.11),
    -1.5px 56.2px 84.3px hsl(var(--shadow-color) / 0.15),
    -2px 78.1px 117.2px hsl(var(--shadow-color) / 0.19),
    -2.8px 108.5px 162.8px hsl(var(--shadow-color) / 0.23),
    -3.9px 150px 225.1px hsl(var(--shadow-color) / 0.27);

/* margin */
--margin-xxs: .25rem;
--margin-xs: .5rem;
--margin-s: .75rem;
--margin-m: 1rem;
--margin-l: 1.25rem;
--margin-xl: 1.75rem;
--margin-xxl: 2.5rem;

h1 {
  font: var(--h1);
  margin-bottom: var(--margin-xl);
}

h2 {
  font: var(--h2);
  margin-bottom: var(--margin-l);
}

h3 {
  font: var(--h3);
  margin-bottom: var(--margin-m);
}

h4 {
  font: var(--h4);
  margin-bottom: var(--margin-s);
}

.big {
  font: var(--big);
  margin-bottom: var(--margin-s);
}

p {
  font: var(--p);
  margin-bottom: var(--margin-xs);
}

.small {
  font: var(--small);
  margin-bottom: var(--margin-xxs);
}
h1, h2, h3, h4, p, .big, .small {
  margin-top: 0;
}
  
.mb-xxs { margin-bottom: var(--margin-xxs); }
.mb-xs  { margin-bottom: var(--margin-xs); }
.mb-s   { margin-bottom: var(--margin-s); }
.mb-m   { margin-bottom: var(--margin-m); }
.mb-l   { margin-bottom: var(--margin-l); }
.mb-xl  { margin-bottom: var(--margin-xl); }
.mb-xxl { margin-bottom: var(--margin-xxl); }
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html{
  font-family: var(--ff);
}