:root {
  /* Light Mode */

  /* text */
  --text-primary: var(--grey12);
  --text-secondary: var(--grey11);
  --text-text-tertiary: var(--grey9);
  --text-text-inverted: var(--grey1);

  /* icon */
  --icon-default: var(--grey11);
  --icon-hover: var(--grey12);

  /* border */
  --border-default: var(--grey5);
  --border-strong: var(--grey7)
  --border-background-color: var(--muave1);

  /* background */
  --background-default: var(--grey1);
  --background-subtle: var(--grey2);
  --background-neutral: var(--grey3);

  /* layout backgrounds */
  --background-header: var(--background-default);
  --background-nav: var(--background-default);
  --background-main: var(--background-default);

  /* action */
  --action-primary-content-default: var(--grey11);
  --action-primary-content-hover: var(--grey12);
  --action-primary-content-active: var(--grey12);
  --action-primary-content-selected: var(--grey12);

  --action-primary-background-default-ghost: transparent;
  --action-primary-background-default-solid: var(--grey2);
  --action-primary-background-hover: var(--grey3);
  --action-primary-background-active: var(--grey3);
  --action-primary-background-selected: var(--grey4);

  --action-primary-border-default: var(--grey4);

  /* semantic */
  --semantic-content-grey: var(--grey11);
  --semantic-content-sky: var(--sky11);
  --semantic-content-grass: var(--grass11);
  --semantic-content-yellow: var(--yellow11);
  --semantic-content-red: var(--red11);

  --semantic-background-grey: var(--grey3);
  --semantic-background-sky: var(--sky3);
  --semantic-background-grass: var(--grass3);
  --semantic-background-yellow: var(--yellow3);
  --semantic-background-red: var(--red3);

  /* code */
  --code-props-content: var(--grey12);
  --code-props-background: var(--grey2);
  --code-props-border: var(--grey5);

  --code-syntax-highlighting-comment: var(--grey11);
  --code-syntax-highlighting-quote: var(--grey11);
  --code-syntax-highlighting-line-number: var(--grey8);
  --code-syntax-highlighting-title: var(--grass9);
  --code-syntax-highlighting-keyword: var(--indigo11);
  --code-syntax-highlighting-code-fg: var(--grey12);
  --code-syntax-highlighting-literal: var(--crimson11);
  --code-syntax-highlighting-type: var(--mint11);
  --code-syntax-highlighting-subst: var(--yellow11);
  --code-syntax-highlighting-meta: var(--yellow11);
  --code-syntax-highlighting-string: var(--lime9);
  --code-syntax-highlighting-addition: var(--grass9);
  --code-syntax-highlighting-deletion: var(--crimson11);
  --code-syntax-highlighting-variable: var(--purple9);

  --code-syntax-highlighting-scrollbar: var(--grey8);
  --code-syntax-highlighting-scrollbar-hover: var(--grey9);

  --code-method-highlighting-type: var(--purple9);
  --code-method-highlighting-type-link: var(--sky11);
  --code-method-highlighting-code-fg: var(--grey12);
  --code-method-highlighting-link-sig-fig: var(--indigo11);
  --code-method-highlighting-keyword: var(--crimson11);

  /* api child */
  --api-child-package-background: var(--yellow11);
  --api-child-class-background: var(--mint11);
  --api-child-object-background: var(--indigo11);
  --api-child-trait-background: var(--sky11);
  --api-child-val-background: var(--lime11);
  --api-child-def-background: var(--lime11);
  --api-child-static-doc-background: var(--grey11);
  --api-child-given-background: var(--purple11);
  --api-child-method-background: var(--indigo11);
  --api-child-enum-background: var(--orange11);
  --api-child-type-background: var(--crimson11);

  /* effects */
  --focus-default: var(--indigo11);
  --shadow-first: var(--shadow1);
  --shadow-second: var(--shadow2);
  --shadow-inset: var(--grey7);

  /* switch */
  --switch-button: var(--grey1);
  --switch-background-default: var(--grey9);
  --switch-background-selected: var(--indigo8);
}

:root.theme-dark {
  /* Dark Mode */

  /* text */
  --text-primary: var(--grey12);
  --text-secondary: var(--grey11);
  --text-text-tertiary: var(--grey9);
  --text-text-inverted: var(--grey1);

  /* icon */
  --icon-default: var(--grey11);
  --icon-hover: var(--grey12);

  /* border */
  --border-default: var(--grey5);
  --border-strong: var(--grey7);
  --border-background-color: var(--grey1);

  /* background */
  --background-default: var(--grey1);
  --background-subtle: var(--grey2);
  --background-neutral: var(--grey3);

  /* layout backgrounds */
  --background-header: var(--background-neutral);
  --background-nav: var(--background-default);
  --background-main: var(--background-subtle);

  /* action */
  --action-primary-content-default: var(--grey11);
  --action-primary-content-hover: var(--grey12);
  --action-primary-content-active: var(--grey12);
  --action-primary-content-selected: var(--grey12);

  --action-primary-background-default-ghost: transparent;
  --action-primary-background-default-solid: var(--grey3);
  --action-primary-background-hover: var(--grey4);
  --action-primary-background-active: var(--grey4);
  --action-primary-background-selected: var(--grey5);

  --action-primary-border-default: var(--grey5);

  /* code */
  --code-props-content: var(--grey12);
  --code-props-background: var(--grey3);
  --code-props-border: var(--grey6);

  --code-syntax-highlighting-comment: var(--grey11);
  --code-syntax-highlighting-quote: var(--grey11);
  --code-syntax-highlighting-line-number: var(--grey8);
  --code-syntax-highlighting-title: var(--grass9);
  --code-syntax-highlighting-keyword: var(--indigo11);
  --code-syntax-highlighting-code-fg: var(--grey12);
  --code-syntax-highlighting-literal: var(--crimson11);
  --code-syntax-highlighting-type: var(--mint11);
  --code-syntax-highlighting-subst: var(--yellow11);
  --code-syntax-highlighting-meta: var(--yellow11);
  --code-syntax-highlighting-string: var(--lime9);
  --code-syntax-highlighting-addition: var(--grass9);
  --code-syntax-highlighting-deletion: var(--crimson11);
  --code-syntax-highlighting-variable: var(--purple9);

  --code-syntax-highlighting-scrollbar: var(--grey8);
  --code-syntax-highlighting-scrollbar-hover: var(--grey9);

  --code-method-highlighting-type: var(--purple9);
  --code-method-highlighting-type-link: var(--sky11);
  --code-method-highlighting-code-fg: var(--grey12);
  --code-method-highlighting-link-sig-fig: var(--indigo11);
  --code-method-highlighting-keyword: var(--crimson11);

  /* semantic */
  --semantic-content-grey: var(--grey11);
  --semantic-content-sky: var(--sky11);
  --semantic-content-grass: var(--grass11);
  --semantic-content-yellow: var(--yellow11);
  --semantic-content-red: var(--red11);

  --semantic-background-grey: var(--grey4);
  --semantic-background-sky: var(--sky4);
  --semantic-background-grass: var(--grass4);
  --semantic-background-yellow: var(--yellow4);
  --semantic-background-red: var(--red4);

  /* api child */
  --api-child-package-background: var(--yellow11);
  --api-child-class-background: var(--mint11);
  --api-child-object-background: var(--indigo11);
  --api-child-trait-background: var(--sky11);
  --api-child-val-background: var(--lime11);
  --api-child-def-background: var(--lime11);
  --api-child-static-doc-background: var(--grey11);
  --api-child-given-background: var(--purple11);
  --api-child-method-background: var(--indigo11);
  --api-child-enum-background: var(--orange11);
  --api-child-type-background: var(--crimson11);

  /* effects */
  --focus-default: var(--indigo9);
  --shadow-first: var(--shadow1);
  --shadow-second: var(--shadow2);
  --shadow-inset: var(--grey7);

  /* switch */
  --switch-button: var(--grey12);
  --switch-background-default: var(--grey9);
  --switch-background-selected: var(--indigo11);
}/*
    Light theme
*/
:root {
  /* grey colors */
  --grey1: #fcfcfc;
  --grey2: #f8f8f8;
  --grey3: #f3f3f3;
  --grey4: #ededed;
  --grey5: #e8e8e8;
  --grey6: #e2e2e2;
  --grey7: #dbdbdb;
  --grey8: #c7c7c7;
  --grey9: #8f8f8f;
  --grey10: #858585;
  --grey11: #6f6f6f;
  --grey12: #171717;

    /* mauve colors */
  --mauve1: #ffffff;
  --mauve2: #f9f8f9;
  --mauve3: #f4f2f4;
  --mauve4: #eeedef;
  --mauve5: #e9e8ea;
  --mauve6: #e4e2e4;
  --mauve7: #dcdbdd;
  --mauve8: #c8c7cb;
  --mauve9: #908e96;
  --mauve10: #86848d;
  --mauve11: #6f6e77;
  --mauve12: #1a1523;

  /* red colors */
  --red1: #fffcfc;
  --red2: #fff8f8;
  --red3: #ffefef;
  --red4: #ffe5e5;
  --red5: #fdd8d8;
  --red6: #f9c6c6;
  --red7: #f3aeaf;
  --red8: #eb9091;
  --red9: #e5484d;
  --red10: #dc3d43;
  --red11: #cd2b31;
  --red12: #381316;

  /* crimson colors */
  --crimson1: #fffcfd;
  --crimson2: #fff7fb;
  --crimson3: #feeff6;
  --crimson4: #fce5f0;
  --crimson5: #f9d8e7;
  --crimson6: #f4c6db;
  --crimson7: #edadc8;
  --crimson8: #e58fb1;
  --crimson9: #e93d82;
  --crimson10: #e93d82;
  --crimson11: #d31e66;
  --crimson12: #3d0d1d;

  /* purple colors */
  --purple1: #fefcfe;
  --purple2: #fdfaff;
  --purple3: #f9f1fe;
  --purple4: #f3e7fc;
  --purple5: #eddbf9;
  --purple6: #e3ccf4;
  --purple7: #d3b4ed;
  --purple8: #be93e4;
  --purple9: #8e4ec6;
  --purple10: #8445bc;
  --purple11: #793aaf;
  --purple12: #2b0e44;

  /* indigo colors */
  --indigo1: #fdfdfe;
  --indigo2: #f8faff;
  --indigo3: #f0f4ff;
  --indigo4: #d9e2fc;
  --indigo5: #d9e2fc;
  --indigo6: #c6d4f9;
  --indigo7: #aec0f5;
  --indigo8: #8da4ef;
  --indigo9: #3e63dd;
  --indigo10: #3a5ccc;
  --indigo11: #3451b2;
  --indigo12: #101d46;

  /* sky colors */
  --sky1: #f9feff;
  --sky2: #f1fcff;
  --sky3: #e4f9ff;
  --sky4: #d5f4fd;
  --sky5: #d5f4fd;
  --sky6: #a4dff1;
  --sky7: #79cfea;
  --sky8: #2ebde5;
  --sky9: #68ddfd;
  --sky10: #5fd4f4;
  --sky11: #0078a1;
  --sky12: #003242;

  /* mint colors */
  --mint1: #f9fefd;
  --mint2: #effefa;
  --mint3: #e1fbf4;
  --mint4: #d2f7ed;
  --mint5: #c0efe3;
  --mint6: #a5e4d4;
  --mint7: #7dd4c0;
  --mint8: #40c4aa;
  --mint9: #70e1c8;
  --mint10: #69d9c1;
  --mint11: #147d6f;
  --mint12: #09342e;

  /* grass colors */
  --grass1: #fbfefb;
  --grass2: #f3fcf3;
  --grass3: #ebf9eb;
  --grass4: #dff3df;
  --grass5: #ceebcf;
  --grass6: #b7dfba;
  --grass7: #b7dfba;
  --grass8: #65ba75;
  --grass9: #46a758;
  --grass10: #3d9a50;
  --grass11: #297c3b;
  --grass12: #297c3b;

  /* lime colors */
  --lime1: #fcfdfa;
  --lime2: #f7fcf0;
  --lime3: #eefadc;
  --lime4: #e4f7c7;
  --lime5: #d7f2b0;
  --lime6: #c9e894;
  --lime7: #c9e894;
  --lime8: #94ba2c;
  --lime9: #99d52a;
  --lime10: #93c926;
  --lime11: #5d770d;
  --lime12: #263209;

  /* yellow colors */
  --yellow1: #fdfdf9;
  --yellow2: #fffce8;
  --yellow3: #fffbd1;
  --yellow4: #fff8bb;
  --yellow5: #fef2a4;
  --yellow6: #f9e68c;
  --yellow7: #efd36c;
  --yellow8: #ebbc00;
  --yellow9: #f5d90a;
  --yellow10: #f7ce00;
  --yellow11: #946800;
  --yellow12: #946800;

  /* orange colors */
  --orange1: #fefcfb;
  --orange2: #fef8f4;
  --orange3: #fff1e7;
  --orange4: #ffe8d7;
  --orange5: #ffdcc3;
  --orange6: #ffcca7;
  --orange7: #ffb381;
  --orange8: #fa934e;
  --orange9: #f76808;
  --orange10: #ed5f00;
  --orange11: #bd4b00;
  --orange12: #451e11;

  /* shadow color */
  --shadow1: rgba(14, 18, 22, 0.2);
  --shadow2: rgba(14, 18, 22, 0.35);
}

/*
    dark theme
*/
:root.theme-dark {
  --grey1: #161616;
  --grey2: #1c1c1c;
  --grey3: #232323;
  --grey4: #282828;
  --grey5: #2e2e2e;
  --grey6: #343434;
  --grey7: #3e3e3e;
  --grey8: #505050;
  --grey9: #707070;
  --grey10: #7e7e7e;
  --grey11: #a0a0a0;
  --grey12: #ededed;

  /* muave colors */
  --mauve1: #161618;
  --mauve2: #1c1c1f;
  --mauve3: #232326;
  --mauve4: #28282c;
  --mauve5: #2e2e32;
  --mauve6: #34343a;
  --mauve7: #3e3e44;
  --mauve8: #504f57;
  --mauve9: #706f78;
  --mauve10: #7e7d86;
  --mauve11: #a09fa6;
  --mauve12: #ededef;

  /* red colors */
  --red1: #1f1315;
  --red2: #291415;
  --red3: #3c181a;
  --red4: #481a1d;
  --red5: #541b1f;
  --red6: #671e22;
  --red7: #822025;
  --red8: #aa2429;
  --red9: #e5484d;
  --red10: #f2555a;
  --red11: #ff6369;
  --red12: #feecee;

  /* crimson colors */
  --crimson1: #1d1418;
  --crimson2: #27141c;
  --crimson3: #3c1827;
  --crimson4: #481a2d;
  --crimson5: #541b33;
  --crimson6: #641d3b;
  --crimson7: #801d45;
  --crimson8: #ae1955;
  --crimson9: #e93d82;
  --crimson10: #f04f88;
  --crimson11: #f76190;
  --crimson12: #feecf4;

  /* purple colors */
  --purple1: #1b141d;
  --purple2: #221527;
  --purple3: #301a3a;
  --purple4: #3a1e48;
  --purple5: #432155;
  --purple6: #4e2667;
  --purple7: #5f2d84;
  --purple8: #7938b2;
  --purple9: #8e4ec6;
  --purple10: #9d5bd2;
  --purple11: #bf7af0;
  --purple12: #f7ecfc;

  /* indigo colors */
  --indigo1: #131620;
  --indigo2: #15192d;
  --indigo3: #192140;
  --indigo4: #1c274f;
  --indigo5: #1f2c5c;
  --indigo6: #22346e;
  --indigo7: #273e89;
  --indigo8: #2f4eb2;
  --indigo9: #3e63dd;
  --indigo10: #5373e7;
  --indigo11: #849dff;
  --indigo12: #eef1fd;

  /* sky colors */
  --sky1: #0c1820;
  --sky2: #071d2a;
  --sky3: #082636;
  --sky4: #082d41;
  --sky5: #08354c;
  --sky6: #083e59;
  --sky7: #064b6b;
  --sky8: #005d85;
  --sky9: #68ddfd;
  --sky10: #8ae8ff;
  --sky11: #8ae8ff;
  --sky12: #eaf8ff;

  /* mint colors */
  --mint1: #081917;
  --mint2: #05201e;
  --mint3: #052926;
  --mint4: #04312c;
  --mint5: #033a34;
  --mint6: #01453d;
  --mint7: #00564a;
  --mint8: #006d5b;
  --mint9: #70e1c8;
  --mint10: #95f3d9;
  --mint11: #25d0ab;
  --mint12: #e7fcf7;

  /* grass colors */
  --grass1: #0d1912;
  --grass2: #0f1e13;
  --grass3: #132819;
  --grass4: #16301d;
  --grass5: #193921;
  --grass6: #1d4427;
  --grass7: #245530;
  --grass8: #2f6e3b;
  --grass9: #46a758;
  --grass10: #55b467;
  --grass11: #63c174;
  --grass12: #e5fbeb;

  /* lime colors */
  --lime1: #141807;
  --lime2: #181d08;
  --lime3: #1e260d;
  --lime4: #252e0f;
  --lime5: #262f0f;
  --lime6: #344213;
  --lime7: #415215;
  --lime8: #536716;
  --lime9: #99d52a;
  --lime10: #c4f042;
  --lime11: #87be22;
  --lime12: #effbdd;

  /* yellow colors */
  --yellow1: #1c1500;
  --yellow2: #221a00;
  --yellow3: #2c2100;
  --yellow4: #352800;
  --yellow5: #3e3000;
  --yellow6: #493c00;
  --yellow7: #594a05;
  --yellow8: #705e00;
  --yellow9: #f5d90a;
  --yellow10: #ffef5c;
  --yellow11: #f0c000;
  --yellow12: #fffad1;

  /* orange colors */
  --orange1: #1f1206;
  --orange2: #2b1400;
  --orange3: #391a03;
  --orange4: #441f04;
  --orange5: #4f2305;
  --orange6: #5f2a06;
  --orange7: #763205;
  --orange8: #943e00;
  --orange9: #f76808;
  --orange10: #ff802b;
  --orange11: #ff8b3e;
  --orange12: #feeadd;

  /* shadow color */
  --shadow1: rgba(0, 0, 0, 0.6);
  --shadow2: rgba(0, 0, 0, 0.75);
}
:root {
  --base-spacing: 8px;
  --header-height: 64px;
}
* {
  /*text-rendering: geometricPrecision;*/
  font-weight: initial;
}

@font-face {
  font-family: "Inter-Bold";
  src: url("../../fonts/Inter-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Inter-SemiBold";
  src: url("../../fonts/Inter-SemiBold.ttf") format("truetype");
}

@font-face {
  font-family: "Inter-Medium";
  src: url("../../fonts/Inter-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "Inter-Regular";
  src: url("../../fonts/Inter-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "FiraCode-Regular";
  src: url("../../fonts/FiraCode-Regular.ttf");
}

.h700 {
  font-size: 40px;
  line-height: 40px;
  font-family: "Inter-Bold", sans-serif;
}

.h600 {
  font-size: 32px;
  line-height: 40px;
  font-family: "Inter-SemiBold", sans-serif;
}

.h600 .single {
  padding-left: 16px;
}

.h500 {
  font-size: 28px;
  line-height: 32px;
  font-family: "Inter-Medium", sans-serif;
}

.h400 {
  font-size: 24px;
  line-height: 32px;
  font-family: "Inter-Medium", sans-serif;
}

.h300 {
  font-size: 20px;
  line-height: 24px;
  font-family: "Inter-Bold", sans-serif;
}

.h200 {
  font-size: 16px;
  line-height: 24px;
  font-family: "Inter-SemiBold", sans-serif;
}

.h100 {
  font-size: 13px;
  line-height: 16px;
  font-family: "Inter-SemiBold", sans-serif;
}

.h50 {
  font-size: 9px;
  line-height: 12px;
  font-family: "Inter-SemiBold", sans-serif;
}

.body-large {
  font-size: 20px;
  line-height: 32px;
  font-family: "Inter-Regular", sans-serif;
}

.body-medium {
  font-size: 16px;
  line-height: 24px;
  font-family: "Inter-Regular", sans-serif;
}

.body-small {
  font-size: 13px;
  line-height: 16px;
  font-family: "Inter-Regular", sans-serif;
}

.mono-medium {
  font-size: 16px;
  line-height: 24px;
  font-family: "FiraCode-Regular", monospace;
}

.mono-small-inline {
  font-size: 13px;
  line-height: 16px;
  font-family: "FiraCode-Regular", monospace;
}

.mono-small-block {
  font-size: 13px;
  line-height: 20px;
  font-family: "FiraCode-Regular", monospace;
}

:root {
  font-variant-ligatures: none;
}
