_sass/abstracts/_variables.scss
$duckDByellow: #fff100;
$duckDBlightyellow: #fffee6;
$purple: #7D66FF;
$blue: #4396D7;
$orange: #FF6900;
$green: #00C770;
$lightpurple: #D9D2FF;
$duckDBgrey: #ebebeb;
$duckDBblue: #e0f1fd;
$duckDBlightgrey: #f5f5f5;

$black600: #626262;
$black500: #7D7D7D;
$black400: #B8B8B8;
$black300: #CFCFCF;
$black200: #E5E5E5;
$black100: #F5F5F5;
$black50: #FAFAFA;

$fontMono:  "JetBrainsMono-Regular", "Lucida Console", monospace;
$fontMonoMedium: "JetBrainsMono-Medium", "Lucida Console", monospace;
$fontMonoBold: "JetBrainsMono-Bold", "Lucida Console", monospace;
$fontMonoXBold: "JetBrainsMono-ExtraBold", "Lucida Console", monospace;
$fontMonoItalic: "JetBrainsMono-Italic", "Lucida Console", monospace;
$fontMonoItalicMedium: "JetBrainsMono-Medium-Italic", "Lucida Console", monospace;
$fontMonoItalicBold: "JetBrainsMono-Bold-Italic", "Lucida Console", monospace;

$fontSans: "SuisseIntl", Helvetica, Arial, sans-serif;

$maxContentWidth: 1150px;
$maxContentWidthOld: 950px;


$fontSizeh1: 47px;
$fontSizeh2: 37px;
$fontSizeh3: 28px;
$fontSizeh4: 23px;
$fontSizep: 18px;
$fontSize16: 16px;
$fontSize14: 14px;
$fontSize12: 12px;

$docuh1: 31px;
$docuh2: 28px;
$docuh3: 24px;
$docuh4: 20px;
$docuh5: 18px;



/* Colors */
:root {
  --blue-02: #020608;
  --blue-05: #091a25;
  --blue-10: #0d2635;
  --blue-15: #102f41;
  --blue-20: #153a51;
  --blue-30: #225677;
  --blue-40: #357197;
  --blue-50: #478db8;
  --blue-60: #58a8da;
  --blue-70: #2eafff;
  --blue-80: #99d8ff;
  --blue-85: #b2e2ff;
  --blue-90: #ccebff;
  --blue-95: #e5f5ff;
  --blue-98: #f5fbff;
  --blue-transparent-10: #0d263599;
  --blue-transparent-15: #102e4199;
  --blue-transparent-20: #153a5199;
  --blue-transparent-30: #20577999;
  --blue-transparent-40: #2b74a199;
  --blue-transparent-5: #091a2599;
  --blue-transparent-80: #99d8ff99;
  --blue-transparent-85: #b2e2ff99;
  --blue-transparent-90: #ccebff99;
  --blue-transparent-95: #e5f5ff99;
  --blue-transparent-98: #f5fbff99;
  --grey-02: #050505;
  --grey-05: #0d0d0d;
  --grey-10: #1a1a1a;
  --grey-100: #ffffff;
  --grey-15: #262626;
  --grey-20: #333333;
  --grey-30: #4c4c4c;
  --grey-40: #666666;
  --grey-50: #808080;
  --grey-60: #999999;
  --grey-70: #b2b2b2;
  --grey-80: #cccccc;
  --grey-85: #d9d9d9;
  --grey-90: #e6e6e6;
  --grey-95: #f2f2f2;
  --grey-98: #fafafa;
  --grey-transparent-05: #0d0d0d99;
  --grey-transparent-10: #1a1a1a99;
  --grey-transparent-15: #26262699;
  --grey-transparent-20: #33333399;
  --grey-transparent-30: #4c4c4c99;
  --grey-transparent-40: #66666699;
  --grey-transparent-50: #80808099;
  --grey-transparent-60: #99999999;
  --grey-transparent-70: #b2b2b299;
  --grey-transparent-80: #cccccc99;
  --grey-transparent-85: #d9d9d999;
  --grey-transparent-90: #e6e6e699;
  --grey-transparent-95: #f2f2f299;
  --grey-transparent-98: #fafafa99;
  --orange-20: #662a00;
  --orange-30: #993f00;
  --orange-40: #cc5400;
  --orange-50: #ff6900;
  --orange-60: #ff8733;
  --orange-70: #ffa566;
  --orange-80: #ffc399;
  --orange-85: #ffd2b2;
  --orange-90: #ffe1cc;
  --orange-95: #fff0e5;
  --orange-98: #fff9f5;
  --orange-transparent-05: #25150999;
  --orange-transparent-10: #351e0d99;
  --orange-transparent-15: #41241099;
  --orange-transparent-20: #512e1599;
  --orange-transparent-85: #ffd2b299;
  --orange-transparent-90: #ffe1cc99;
  --orange-transparent-95: #fff0e599;
  --orange-transparent-98: #fff9f599;
  --purple-02: #030208;
  --purple-05: #0d0925;
  --purple-10: #130d35;
  --purple-15: #181041;
  --purple-20: #1e1551;
  --purple-30: #2f2277;
  --purple-40: #423597;
  --purple-50: #5647b8;
  --purple-60: #6a58da;
  --purple-70: #7d66ff;
  --purple-80: #a899ff;
  --purple-85: #beb3ff;
  --purple-90: #d4ccff;
  --purple-95: #e9e5ff;
  --purple-98: #f6f5ff;
  --purple-transparent-05: #16111d99;
  --purple-transparent-10: #20182a99;
  --purple-transparent-15: #271e3399;
  --purple-transparent-20: #36294799;
  --purple-transparent-80: #a999ff99;
  --purple-transparent-85: #beb2ff99;
  --purple-transparent-90: #d4ccff99;
  --purple-transparent-95: #e9e5ff99;
  --purple-transparent-98: #f6f5ff99;
  --red-02: #0a0000;
  --red-05: #1a0000;
  --red-10: #330000;
  --red-15: #4d0000;
  --red-20: #660000;
  --red-30: #990000;
  --red-40: #cc0000;
  --red-50: #ff0000;
  --red-60: #ff3333;
  --red-70: #ff6666;
  --red-80: #ff9999;
  --red-85: #ffb2b2;
  --red-90: #ffcccc;
  --red-95: #ffe5e5;
  --red-98: #fff5f5;
  --red-transparent-05: #25090999;
  --red-transparent-10: #350d0d99;
  --red-transparent-15: #41101099;
  --red-transparent-20: #51151599;
  --red-transparent-85: #ffb2b299;
  --red-transparent-90: #ffcccc99;
  --red-transparent-95: #ffe5e599;
  --red-transparent-98: #fff5f599;
  --yellow-02: #0a0900;
  --yellow-05: #1a1700;
  --yellow-10: #332e00;
  --yellow-15: #4d4600;
  --yellow-20: #665d00;
  --yellow-30: #998b00;
  --yellow-40: #ccbd00;
  --yellow-45: #eddd0c;
  --yellow-48: #f3e71b;
  --yellow-50: #fff100;
  --yellow-55: #fff21a;
  --yellow-60: #fff433;
  --yellow-70: #fff866;
  --yellow-80: #fffa99;
  --yellow-85: #fffcb2;
  --yellow-90: #fffdcc;
  --yellow-95: #fffee5;
  --yellow-98: #fffff5;
  --yellow-transparent-05: #1a170099;
  --yellow-transparent-10: #332e0099;
  --yellow-transparent-15: #4d460099;
  --yellow-transparent-20: #665d0099;
  --yellow-transparent-30: #998b0099;
  --yellow-transparent-40: #ccbd0099;
  --yellow-transparent-50: #fff10099;
  --yellow-transparent-60: #fff43399;
  --yellow-transparent-70: #fff86699;
  --yellow-transparent-80: #fffa9999;
  --yellow-transparent-85: #fffcb299;
  --yellow-transparent-90: #fffdcc99;
  --yellow-transparent-95: #fffee599;
  --yellow-transparent-98: #fffff599;

  // LIGHT MODE
  --ddbce-button-ce-background-color: var(--purple-80);
  --ddbce-button-ce-border-color: var(--purple-60);
  --ddbce-highlight-purple-background-color: var(--grey-10);
  --ddbce-highlight-purple-text-color: var(--purple-80);
  --ddbce-menu-ce-background-color: var(--purple-90);
  --doc-box-best-practice: var(--blue-70);
  --doc-box-deprecated: var(--purple-70);
  --doc-box-note: var(--grey-60);
  --doc-box-tip: #00c770;
  --doc-box-update: #976f4d;
  --doc-box-warning: var(--orange-50);
  --doc-codebox-background-color: var(--grey-95);
  --doc-codebox-background-hover: var(--grey-90);
  --doc-codebox-border-color: var(--grey-90);
  --doc-codebox-button-background-color: var(--grey-transparent-85);
  --doc-codebox-button-background-color-hover: var(--grey-transparent-70);
  --doc-codebox-button-border: var(--grey-80);
  --doc-menu-info-deprecated-border-color: var(--purple-70);
  --doc-scrollbar-bg: var(--grey-90);
  --doc-scrollbar-slider: var(--grey-80);
  --doc-search-background-color: var(--grey-transparent-90);
  --doc-sidebar-selected-background-color: var(--grey-95);
  --doc-sidebar-text-selected: var(--grey-05);
  --doc-sidebar-text-unselected: var(--grey-15);
  --doc-warning-background-color: var(--orange-transparent-95);
  --doc-warning-border-color: var(--orange-transparent-90);
  --interactive-button-black-background-color: var(--grey-10);
  --interactive-button-black-background-color-hover: var(--grey-30);
  --interactive-button-black-border-color: var(--grey-10);
  --interactive-button-black-border-color-hover: var(--grey-10);
  --interactive-button-black-text-color: var(--grey-90);
  --interactive-button-no-background-color-hover: var(--grey-90);
  --interactive-button-primary-orange-background: var(--orange-50);
  --interactive-button-primary-orange-background-hover: var(--orange-70);
  --interactive-button-primary-orange-border: var(--orange-40);
  --interactive-button-primary-orange-border-hover: var(--orange-60);
  --interactive-button-primary-yellow-background-color: var(--yellow-50);
  --interactive-button-primary-yellow-background-color-hover: var(--yellow-70);
  --interactive-button-primary-yellow-border-color: var(--yellow-45);
  --interactive-button-primary-yellow-border-color-hover: var(--yellow-55);
  --interactive-button-purple-background: var(--purple-70);
  --interactive-button-purple-border: var(--purple-60);
  --interactive-button-purple-text-hover: var(--purple-70);
  --interactive-button-white-background-color-hover: var(--grey-10);
  --interactive-filter-selected-background-color: var(--grey-90);
  --interactive-filter-selected-background-color-hover: var(--grey-80);
  --interactive-filter-selected-text-color: var(--grey-10);
  --interactive-filter-unselected-text-color: var(--grey-40);
  --interactive-filter-unselected-text-color-hover: var(--grey-05);
  --interactive-filterbox-background-color: var(--grey-98);
  --interactive-filterbox-border-color: var(--grey-90);
  --interactive-folderbox-background-color: var(--grey-transparent-98);
  --interactive-folderbox-background-color-hover: var(--grey-transparent-95);
  --interactive-folderbox-border-color: var(--grey-90);
  --interactive-folderbox-border-color-hover: var(--grey-80);
  --interactive-folderbox-text-color: var(--grey-10);
  --interactive-folderbox-text-color-hover: var(--grey-20);
  --interactive-installation-box-background: var(--purple-95);
  --interactive-installation-box-border: var(--purple-85);
  --interactive-installation-error-border: var(--orange-70);
  --interactive-installation-icon-background: var(--grey-transparent-90);
  --interactive-installation-icon-background-selected: var(--purple-90);
  --interactive-installation-icon-border: var(--grey-80);
  --lake-architecture-background-hover: var(--blue-95);
  --lake-architecture-logo-catalog-db: var(--grey-30);
  --lake-architecture-logo-catalog-icon: var(--grey-95);
  --lake-architecture-logo-highlight-db: var(--yellow-50);
  --lake-architecture-logo-highlight-lake: var(--blue-70);
  --lake-architecture-logo-primary-db: var(--grey-05);
  --lake-architecture-logo-primary-lake: var(--grey-05);
  --lake-background-gradient-end: var(--blue-95);
  --lake-background-gradient-start: var(--blue-98);
  --lake-filter-selected-background-color: var(--blue-90);
  --lake-filter-selected-background-color-2: var(--blue-90);
  --lake-graphics-arrow: var(--blue-80);
  --lake-graphics-element-border: var(--blue-80);
  --lake-highlight-blue-background-color: var(--blue-70);
  --lake-highlight-blue-text-color: var(--grey-10);
  --lake-infobox-border-color: var(--blue-transparent-90);
  --lake-infobox-primary-background-color: var(--blue-transparent-95);
  --lake-infobox-quaternary-background-color: var(--blue-transparent-85);
  --lake-infobox-secondary-background-color: var(--blue-transparent-90);
  --lake-infobox-tertiary-background-color: var(--blue-transparent-85);
  --lake-ribbon-background-color: var(--blue-transparent-80);
  --lake-ribbon-border-color: var(--blue-transparent-80);
  --main-blogpost-background-color: var(--grey-100);
  --main-blogpost-border-color: var(--grey-90);
  --main-body-background-color: var(--grey-98);
  --main-codebox-border-color: #0d0d0d26;
  --main-codebox-dropshadow: #0000000d;
  --main-codebox-main-background-color: var(--grey-transparent-98);
  --main-codebox-sub-background-color: #0d0d0d14;
  --main-highlight-orange-background: var(--grey-10);
  --main-highlight-orange-text: var(--orange-50);
  --main-highlight-purple-background: var(--grey-10);
  --main-highlight-purple-text-color: var(--purple-80);
  --main-highlight-yellow-background-color: var(--grey-10);
  --main-highlight-yellow-text-color: var(--yellow-50);
  --main-infobox-background-color: var(--purple-transparent-98);
  --main-infobox-background-color-hover: var(--purple-transparent-90);
  --main-infobox-border-color: var(--purple-transparent-90);
  --main-marker-background-color: var(--yellow-transparent-60);
  --main-marker-border-color: var(--yellow-45);
  --main-ribbon-background-color-blue: var(--blue-transparent-80);
  --main-ribbon-background-color-purple: var(--purple-transparent-80);
  --main-ribbon-background-color-yellow: var(--yellow-transparent-80);
  --main-ribbon-border-color-blue: var(--blue-transparent-80);
  --main-ribbon-border-color-purple: var(--purple-transparent-80);
  --main-ribbon-border-color-yellow: var(--yellow-transparent-80);
  --main-section-background-gradient-end-color: var(--grey-95);
  --main-section-background-gradient-start-color: var(--grey-98);
  --main-section-orange-background-gradient-end-color: var(--orange-50);
  --main-section-orange-background-gradient-start-color: var(--grey-98);
  --main-text-primary-color: var(--grey-05);
  --main-text-primary-color-strong: var(--grey-02);
  --main-text-secondary-color: var(--grey-40);
  --main-text-tertiary-color: var(--grey-70);
  --menu-dropdown-background-color: var(--grey-95);
  --menu-dropdown-border-color: var(--grey-90);
  --menu-dropdown-item-background-hover: var(--grey-90);
  --menu-topmenu-background-color: var(--grey-transparent-98);
  --menu-topmenu-border-color: #cccccc4d;
  --menu-topmenu-searchbar-border-color: var(--grey-transparent-85);
  --menu-topmenu-searchbar-shortcut-background-color: var(--grey-transparent-90);
  --menu-topmenu-searchbar-shortcut-text-color: var(--grey-60);
  --menu-topmenu-searchbar-text-color: var(--grey-transparent-30);
  --menu-topmenu-text-color: var(--grey-10);
  --menu-topmenu-text-color-hover: var(--purple-60);
  --no-export-labs: var(--grey-transparent-95);
  --social-shape-gradient-end-color: var(--yellow-40);
  --social-shape-gradient-start-color: var(--yellow-45);
  --social-social-background: var(--grey-95);
  --social-social-code-background: var(--grey-90);
  --social-social-code-border: var(--grey-80);
  --social-social-colorful-background: var(--yellow-50);
  --social-social-colorful-border: var(--yellow-40);
  --social-social-colorful-code-background: var(--yellow-45);
  --social-thumbnail-background-color: var(--yellow-50);
  --social-thumbnail-background-shape-color: var(--yellow-45);
  --social-thumbnail-button-background-color: var(--grey-10);
  --social-thumbnail-button-text-color: var(--yellow-50);
  --social-thumbnail-symbol-background: var(--grey-05);
  --social-thumbnail-symbol-image: var(--yellow-50);
  --social-thumbnail-text-color: var(--grey-10);
  --social-yel-purp-1: #fff100;
  --social-yel-purp-2: #eddd0c;
  --syntax-class-type-interface: #d52753;
  --syntax-comment: var(--grey-60);
  --syntax-constant: #823ff1;
  --syntax-function-method: #23974a;
  --syntax-keyword: #0098dd;
  --syntax-markup-attribute: #df631c;
  --syntax-markup-tag: #275fe4;
  --syntax-number: #ce33c0;
  --syntax-operator-punctuation: #7a82da;
  --syntax-property: #976f4d;
  --syntax-string: #c5a332;
}


// DARK MODE 
html.darkmode {
  --ddbce-button-ce-background-color: var(--purple-80);
  --ddbce-button-ce-border-color: var(--purple-60);
  --ddbce-highlight-purple-background-color: var(--purple-80);
  --ddbce-highlight-purple-text-color: var(--grey-10);
  --ddbce-menu-ce-background-color: var(--purple-10);
  --doc-box-best-practice: var(--blue-20);
  --doc-box-deprecated: var(--purple-30);
  --doc-box-note: var(--grey-20);
  --doc-box-tip: #004d2b;
  --doc-box-update: #523c2e;
  --doc-box-warning: var(--orange-20);
  --doc-codebox-background-color: var(--grey-10);
  --doc-codebox-background-hover: var(--grey-15);
  --doc-codebox-border-color: var(--grey-20);
  --doc-codebox-button-background-color: var(--grey-transparent-20);
  --doc-codebox-button-background-color-hover: var(--grey-transparent-30);
  --doc-codebox-button-border: var(--grey-30);
  --doc-menu-info-deprecated-border-color: var(--purple-80);
  --doc-scrollbar-bg: var(--grey-15);
  --doc-scrollbar-slider: var(--grey-20);
  --doc-search-background-color: var(--grey-transparent-20);
  --doc-sidebar-selected-background-color: var(--grey-10);
  --doc-sidebar-text-selected: var(--grey-98);
  --doc-sidebar-text-unselected: var(--grey-85);
  --doc-warning-background-color: var(--orange-transparent-15);
  --doc-warning-border-color: var(--orange-transparent-20);
  --interactive-button-black-background-color: var(--grey-70);
  --interactive-button-black-background-color-hover: var(--grey-90);
  --interactive-button-black-border-color: var(--grey-60);
  --interactive-button-black-border-color-hover: var(--grey-90);
  --interactive-button-black-text-color: var(--grey-10);
  --interactive-button-no-background-color-hover: var(--grey-20);
  --interactive-button-primary-orange-background: var(--orange-50);
  --interactive-button-primary-orange-background-hover: var(--orange-70);
  --interactive-button-primary-orange-border: var(--orange-40);
  --interactive-button-primary-orange-border-hover: var(--orange-70);
  --interactive-button-primary-yellow-background-color: var(--yellow-50);
  --interactive-button-primary-yellow-background-color-hover: var(--yellow-70);
  --interactive-button-primary-yellow-border-color: var(--yellow-50);
  --interactive-button-primary-yellow-border-color-hover: var(--yellow-70);
  --interactive-button-purple-background: var(--purple-70);
  --interactive-button-purple-border: var(--purple-60);
  --interactive-button-purple-text-hover: var(--purple-80);
  --interactive-button-white-background-color-hover: var(--grey-90);
  --interactive-filter-selected-background-color: var(--grey-15);
  --interactive-filter-selected-background-color-hover: var(--grey-20);
  --interactive-filter-selected-text-color: var(--grey-90);
  --interactive-filter-unselected-text-color: var(--grey-70);
  --interactive-filter-unselected-text-color-hover: var(--grey-95);
  --interactive-filterbox-background-color: var(--grey-05);
  --interactive-filterbox-border-color: var(--grey-20);
  --interactive-folderbox-background-color: var(--grey-transparent-10);
  --interactive-folderbox-background-color-hover: var(--grey-transparent-15);
  --interactive-folderbox-border-color: var(--grey-20);
  --interactive-folderbox-border-color-hover: var(--grey-30);
  --interactive-folderbox-text-color: var(--grey-90);
  --interactive-folderbox-text-color-hover: var(--grey-80);
  --interactive-installation-box-background: var(--yellow-transparent-10);
  --interactive-installation-box-border: var(--yellow-20);
  --interactive-installation-error-border: var(--orange-30);
  --interactive-installation-icon-background: var(--grey-transparent-20);
  --interactive-installation-icon-background-selected: var(--yellow-transparent-20);
  --interactive-installation-icon-border: var(--grey-transparent-30);
  --lake-architecture-background-hover: var(--blue-20);
  --lake-architecture-logo-catalog-db: var(--blue-30);
  --lake-architecture-logo-catalog-icon: var(--grey-05);
  --lake-architecture-logo-highlight-db: var(--grey-05);
  --lake-architecture-logo-highlight-lake: var(--grey-05);
  --lake-architecture-logo-primary-db: var(--blue-40);
  --lake-architecture-logo-primary-lake: var(--blue-70);
  --lake-background-gradient-end: var(--blue-05);
  --lake-background-gradient-start: var(--blue-02);
  --lake-filter-selected-background-color: var(--blue-15);
  --lake-filter-selected-background-color-2: var(--blue-15);
  --lake-graphics-arrow: var(--blue-40);
  --lake-graphics-element-border: var(--blue-30);
  --lake-highlight-blue-background-color: var(--grey-10);
  --lake-highlight-blue-text-color: var(--blue-70);
  --lake-infobox-border-color: var(--grey-transparent-20);
  --lake-infobox-primary-background-color: var(--blue-transparent-15);
  --lake-infobox-quaternary-background-color: var(--blue-transparent-5);
  --lake-infobox-secondary-background-color: var(--blue-transparent-15);
  --lake-infobox-tertiary-background-color: var(--blue-transparent-15);
  --lake-ribbon-background-color: var(--blue-transparent-20);
  --lake-ribbon-border-color: var(--blue-transparent-30);
  --main-blogpost-background-color: var(--grey-02);
  --main-blogpost-border-color: var(--grey-20);
  --main-body-background-color: var(--grey-05);
  --main-codebox-border-color: var(--grey-20);
  --main-codebox-dropshadow: #ffffff26;
  --main-codebox-main-background-color: var(--grey-transparent-05);
  --main-codebox-sub-background-color: var(--grey-transparent-20);
  --main-highlight-orange-background: var(--grey-10);
  --main-highlight-orange-text: var(--orange-50);
  --main-highlight-purple-background: var(--purple-80);
  --main-highlight-purple-text-color: var(--grey-10);
  --main-highlight-yellow-background-color: var(--yellow-50);
  --main-highlight-yellow-text-color: var(--grey-10);
  --main-infobox-background-color: var(--grey-transparent-15);
  --main-infobox-background-color-hover: var(--grey-transparent-20);
  --main-infobox-border-color: var(--grey-transparent-20);
  --main-marker-background-color: var(--yellow-transparent-30);
  --main-marker-border-color: var(--yellow-transparent-40);
  --main-ribbon-background-color-blue: var(--blue-transparent-20);
  --main-ribbon-background-color-purple: var(--purple-transparent-20);
  --main-ribbon-background-color-yellow: var(--yellow-transparent-20);
  --main-ribbon-border-color-blue: var(--blue-transparent-20);
  --main-ribbon-border-color-purple: var(--purple-transparent-20);
  --main-ribbon-border-color-yellow: var(--yellow-transparent-20);
  --main-section-background-gradient-end-color: var(--grey-10);
  --main-section-background-gradient-start-color: var(--grey-05);
  --main-section-orange-background-gradient-end-color: var(--orange-50);
  --main-section-orange-background-gradient-start-color: var(--grey-05);
  --main-text-primary-color: var(--grey-95);
  --main-text-primary-color-strong: var(--grey-100);
  --main-text-secondary-color: var(--grey-70);
  --main-text-tertiary-color: var(--grey-50);
  --menu-dropdown-background-color: var(--grey-05);
  --menu-dropdown-border-color: var(--grey-20);
  --menu-dropdown-item-background-hover: var(--grey-15);
  --menu-topmenu-background-color: var(--grey-transparent-10);
  --menu-topmenu-border-color: #5959594d;
  --menu-topmenu-searchbar-border-color: var(--grey-transparent-30);
  --menu-topmenu-searchbar-shortcut-background-color: var(--grey-transparent-30);
  --menu-topmenu-searchbar-shortcut-text-color: var(--grey-60);
  --menu-topmenu-searchbar-text-color: var(--grey-transparent-85);
  --menu-topmenu-text-color: var(--grey-98);
  --menu-topmenu-text-color-hover: var(--yellow-50);
  --no-export-labs: var(--grey-transparent-15);
  --social-shape-gradient-end-color: var(--grey-30);
  --social-shape-gradient-start-color: var(--grey-15);
  --social-social-background: var(--grey-05);
  --social-social-code-background: var(--grey-10);
  --social-social-code-border: var(--grey-30);
  --social-social-colorful-background: var(--purple-70);
  --social-social-colorful-border: var(--purple-30);
  --social-social-colorful-code-background: var(--purple-50);
  --social-thumbnail-background-color: var(--grey-10);
  --social-thumbnail-background-shape-color: var(--grey-15);
  --social-thumbnail-button-background-color: var(--yellow-50);
  --social-thumbnail-button-text-color: var(--grey-02);
  --social-thumbnail-symbol-background: var(--yellow-50);
  --social-thumbnail-symbol-image: var(--grey-05);
  --social-thumbnail-text-color: var(--grey-95);
  --social-yel-purp-1: #a899ff;
  --social-yel-purp-2: #9787f2;
  --syntax-class-type-interface: #ff6480;
  --syntax-comment: var(--grey-40);
  --syntax-constant: #9f7efe;
  --syntax-function-method: #3fc56b;
  --syntax-keyword: #0098dd;
  --syntax-markup-attribute: #ff936a;
  --syntax-markup-tag: #3691ff;
  --syntax-number: #ff78f8;
  --syntax-operator-punctuation: #7a82da;
  --syntax-property: #ba9678;
  --syntax-string: #f9c859;
}

/* Desktop/Mobile */
:root {
  --type-weight-standard: 450;
  /* Desktop */
  --page-section-padding: 20px;
  --page-element-spacing-medium: 25px;
  --page-docs-page-padding: 30px;
  --page-element-spacing-large: 50px;
  --page-section-spacing: 105px;
  --page-max-width-tiny: 500px;
  --page-max-width-small: 750px;
  --page-max-width-medium: 950px;
  --page-max-width-large: 1150px;
  --type-label-3: 11px;
  --type-label-2: 12px;
  --type-tiny: 12px;
  --type-pre-title: 13px;
  --type-body-small: 14px;
  --type-code: 14px;
  --type-label-1: 14px;
  --type-title-3: 14px;
  --type-menu-items: 15px;
  --type-body-normal: 16px;
  --type-code-large: 16px;
  --type-title-2: 16px;
  --type-body-large: 18px;
  --type-title-1: 18px;
  --type-headline-3: 24px;
  --type-headline-2: 28px;
  --type-headline-1: 32px;
  --type-display-3: 36px;
  --type-display-2: 45px;
  --type-display-1: 57px;
}

// MOBILE SIZES
@media (max-width: 720px) {
  :root {
    --type-weight-standard: 400;
    /* Mobile */
    --page-docs-page-padding: 15px;
    --page-section-padding: 15px;
    --page-element-spacing-medium: 20px;
    --page-element-spacing-large: 35px;
    --page-section-spacing: 55px;
    --page-max-width-large: 393px;
    --page-max-width-medium: 393px;
    --page-max-width-small: 393px;
    --page-max-width-tiny: 393px;
    --type-label-3: 11px;
    --type-tiny: 11px;
    --type-label-2: 12px;
    --type-pre-title: 12px;
    --type-body-small: 13px;
    --type-code: 13px;
    --type-label-1: 13px;
    --type-title-3: 13px;
    --type-body-normal: 14px;
    --type-menu-items: 14px;
    --type-code-large: 15px;
    --type-title-2: 15px;
    --type-body-large: 16px;
    --type-title-1: 16px;
    --type-headline-3: 19px;
    --type-headline-2: 23px;
    --type-headline-1: 27px;
    --type-display-3: 30px;
    --type-display-2: 34px;
    --type-display-1: 38px;
  }
}

