:root {
    /* fonts */
    --header-1: Poppins;
    --font-inter: Inter;
  
    /* font sizes */
    --font-size-xl: 20px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --header-1-size: 36px;
    --font-size-sm: 14px;
    --font-size-5xl: 24px;
    --font-size-45xl: 64px;
  
    /* Colors */
    --color-gray-100: #fbfbfb;
    --black: #191919;
    --main-blue: #00c5ff;
    --main-blue-opt: #00c5ff;
    --main-blue-menu: #00c5ff;
    --color-white: #fff;
    --stroke: #d2d2d2;
    --black1: #000;
    --color-red: #ff2e00;
    --color-orange: #ffac00;
    --color-lightgreen: #75d979;
    --color-whitesmoke: #f5f5f5;
    --color-silver-100: #c9c9c9;
    --darkmode-blacker: #0C0C0C;
    --black-grey: #414141;
    --color-white-opt: #fff;
    --stroke-opt: #d2d2d2;
    --white-opt-new: #fff;
    --very-light-silver: #f3f3f3;
  
    /* Gaps */
    --gap-xl: 20px;
    --gap-3xs: 10px;
    --gap-smi: 13px;
    --gap-mini: 15px;
    --gap-base: 16px;
    --gap-8xs: 5px;
  
    /* Paddings */
    --padding-xl: 20px;
    --padding-21xl: 40px;
    --padding-3xs: 10px;
    --padding-6xl: 25px;
    --padding-mini: 15px;
    --padding-41xl: 60px;
    --padding-8xs: 5px;
    --padding-11xl: 30px;
    --padding-48xl: 67px;
  
    /* Border radiuses */
    --br-xl: 20px;
    --br-3xs: 10px;
    --br-8xs: 5px;
    --br-81xl: 100px;
    --br-11xs: 2px;
  }
  

  .dark-theme {
    --color-gray-100: #191919;
    --color-white: var(--darkmode-blacker);
    --stroke: var(--darkmode-blacker);
    --main-blue-opt: var(--darkmode-blacker);
    --color-white-opt: #fff;
    --color-whitesmoke: #4361ee;
    --color-silver-100: #00c5ff;
    --stroke-opt: #00c5ff;
    --black1: #fff;
    --black: #fff;
    --white-opt-new: #4d4d4d;
    --main-blue-menu: #4d4d4d;
    --very-light-silver: #191919;

  }