:root{
    --btn-hover-bg: #0096c7;
    --text-color: #b3b3b3;
    --btn-color: #000;
    --text-strong-color:#fff;
    --secondary-background-color: #1f1f1f;
    --main-color: #3bacdf;
    --syne: 'Syne', Arial, sans-serif;
    --border-color: #444;
    --black-color: #000;
    --toneart-orange: #fb8500;
    --toneart-orange-hover: #c16600;
    --white-color:#fff;
    --third-bg:#262626;
    --simple-bg: #000;
    --orange-gradient: -webkit-linear-gradient(var(--toneart-orange), #a45f00);
    --font-family: 'Syne', Arial, sans-serif;
    --modern-graident: linear-gradient(90deg, rgba(58, 172, 223, 1) 0%, #66ee88 68%,  #56ff72 80%, rgba(237, 221, 83, 1) 100%);
    --inset-shadow: inset 0 1px 1px rgb(255 255 255 / 70%);
    --btn-transform:  translateY(-2px) scale(1.01);
    --btn-radius: 15px;
    --border-radius: 12px;
    --border-radius-s: 10px;
    --border-radius-x: 15px;
    --circle: 50px;
    --green-gradient: linear-gradient(174deg, #00de52 0%, #289034 50%, #004218 100%);
    --green-gradient-hover: linear-gradient(334deg, #00481b 0%, #009411 50%, #004218 100%);
}
 body.light-mode{
     --text-color:#000;
     --text-strong-color:#000;
     --btn-color: #000;
     --secondary-background-color: #efefef;
     --border-color: #44444469;
     --white-color:#fff;
     --third-bg:#fff;
     --simple-bg: #fff;
     --orange-gradient: -webkit-linear-gradient(var(--toneart-orange), #ffac3a);
      --font-family: 'Syne', Arial, sans-serif;
 }