:root {
  --clr-primary: #4CAF50;
  
  --clr-blue: #1976D2;
  --clr-blue-dark: #204d74;

  --clr-red: #ff4747;
  --clr-red-dark: #e54040;

  --clr-yellow: 

  --clr-yellow: #ccb024;
  
  --clr-txt-white: #fff;

  --clr-txt-primary: #262E34;
  --clr-txt-grey: #67757E;
  
  --clr-bg-white: #fff;
  --clr-bg-grey: #f1f1f1;

  --clr-grey: #f1f1f1;
  --clr-grey2: #e5e5e5;

  --clr-grey-dark: #37434c;

  --clr-overlay: rgba(255, 255, 255, 0.9);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --clr-primary: #61ba65;

    --clr-blue: #145ea8;
    --clr-blue-dark: #1a3e5d;

    --clr-yellow: #ffe332;

    --clr-bg-grey: #202324;
    --clr-bg-white: #303436;

    --clr-txt-primary: #f1f1f1;

    --clr-grey: #44494c;
    --clr-grey2: #3d4144;

    --clr-grey-dark: #ccc;

    --clr-overlay: rgba(0, 0, 0, 0.9);
  }
}