:root {
  --basicTurquoise: #00B496;
  --basicGold:      #FFC800;
  --basicCoral:     #FF5050;
  --basicNavy:      #003C6E;
  --basicFuchsia:   #FA3296;
  --basicCerulean:  #0096BE;
  --basicLavanda:   #A05ADC;
  --basicLime:      #7ED321;

  --softTurquoise:  #85E4CE;
  --softGold:       #FBDF86;
  --softCoral:      #FCABAB;
  --softNavy:       #89C6E4;
  --softFuchsia:    #FF8DC6;
  --softCerulean:   #9FD6E8;
  --softLavanda:    #D2BEF0;
  --softLime:       #C9EFA0;

  --shadowTurquoise: #005144;
  --shadowGold:      #735A00;
  --shadowCoral:     #732424;
  --shadowNavy:      #001B32;
  --shadowFuchsia:   #711744;
  --shadowCerulean:  #004456;
  --shadowLavanda:   #482963;
  --shadowLime:      #385E0F;

  --fluorTurquoise: #1AFFCC;
  --fluorGold:      #ffe600;
  --fluorCoral:     #ff2828;
  --fluorNavy:      #003aa5;
  --fluorFuchsia:   #df0785;
  --fluorCerulean:  #00A8FF;
  --fluorLavanda:   #9D00FF;
  --fluorLime:      #9FFF00;

  --fluorGrey1:     #FFFFFF;
  --fluorGrey2:     #eceaea;
  --fluorGrey4:     #0D0D0D;
  --fluorGrey5:     #000000;
  --basicGrey3:     #3a3a3a;
  --basicGrey5:     #13161A;
  --secondaryGrey2: #8E8E8E;
  --secondaryGrey3: #525252;    

  --pageBackground: var(--fluorGrey1);
  --surfaceText:    var(--basicGrey3);
  --hairline:       color-mix(in srgb, var(--secondaryGrey2) 40%, transparent);
  --shadow-card:    0 14px 40px color-mix(in srgb, var(--fluorGrey5) 8%, transparent);
}