:root.light-mode {
  --grey-fg: #aeaeae;
  --bg: #ffffff;
  --fg: #383838;
  --card-bg: #f0f1f3; 
  --card-fg: #383838; 
  /* text (api side menus h3...)  */
  --menu-grey: #888; 
  --hover-border: #484848; 
  --hover-bg: #D3D3D3; 
  --hover-fg: #fafafa;
  --border: #d9e1e4; 
  --link: #0e78ce;
    /* docs related */
  --box-fg: #181818;
  --info-bg: #cfd4fc;
  --info-accent: #0f1c8a;
  --notice-bg: #fceac5;
  --notice-accent: #2E1D00;
  --warn-bg: #fad1df;
  --warn-accent: #8a0f3a;
  --code-bg: #f0f1f3;
  /* support page related */
  --supported-fg: #009000;
  --eol-fg: #ff0000;
}
:root.dark-mode {
  --bg: #0c0c0c;
  --fg: #fafafa;
  --card-bg: #181818;  
  --card-fg: #f7f4f4;
  --hover-bg: #262626;
  --hover-fg: #f2f2f2;
  --hover-border: #fafafa;
  --border: #d9e1e4;
  /* text (api side menus h3...) */
  --menu-grey: silver;
  --link: #259dff;
  --menu-em: #a2a0a0eb;
    /* docs related */
  --box-fg: #ffffff;
  --info-bg: #171d4f;
  --info-accent: #bdc3ff;
  --notice-bg: #4e4022;
  --notice-accent: #f9e8c3;
  --warn-bg: #4e2232;
  --warn-accent: #f9c3d6;
  --code-bg: #2b2b2b;
    /* support page related */
  --supported-fg:#299009;
  --eol-fg: #ff1a1a;
}