body {
    --surface: rgb(247, 250, 252);
    --surface: #f7fafc;
    --on-surface: #1a202c;
    --elevation-1-shadow: 0px -6px 7px 0px black;
    --elevation-1: #c2c2c2;
    --on-elevation-1: #000000;

    --divider: #e2e8f0;
    --gradient-1: linear-gradient(90deg, #84fab0, #8fd3f4 51%, #84fab0) 100% / 200%;
    --gradient-2: linear-gradient(90deg, rgba(255, 42,228,1) 0%,
                                         rgba(164,255,177,1) 60%, 
                                         rgba(214,255,241,1) 85%,
                                         var(--surface) 100%); 
}

body.dark {
    --surface: #161616;
    --on-surface: #a5a5a5;
    --elevation-1-shadow: none;
    --elevation-1: #3b3b3b;
    --on-elevation-1: #afafaf;

    --divider: #363636;
    --gradient-1: linear-gradient(90deg, #0c5f2b, #0a2531 51%, #1e6439) 100% / 200%;
    --gradient-2: linear-gradient(to right, rgb(110, 0, 96) 11.34%, rgb(27, 142, 43) 51.68%, rgb(11, 73, 41) 76.05%, #161616 96.22%)
}