:root {
  --titles-font: Gotham, sans-serif;
  --paragraphs-font: Segoe,sans-serif;

  --titles-dark: #3d3d59;
  --titles-light: #ffffff;
  --text-dark: #686b80;
  --text-light: #ffffff;
  
  --titles-dark-10: #3d3d5919;
  --titles-dark-20: #3d3d5933;
  --titles-dark-30: #3d3d594c;
  --titles-dark-40: #3d3d5966;
  --titles-dark-50: #3d3d597f;
  --titles-dark-60: #3d3d5999;
  --titles-dark-70: #3d3d59b2;
  --titles-dark-80: #3d3d59cc;
  --titles-dark-90: #3d3d59e5;
  --titles-dark-100: #3d3d59ff;

  --titles-light-10: #ffffff19;
  --titles-light-20: #ffffff33;
  --titles-light-30: #ffffff4c;
  --titles-light-40: #ffffff66;
  --titles-light-50: #ffffff7f;
  --titles-light-60: #ffffff99;
  --titles-light-70: #ffffffb2;
  --titles-light-80: #ffffffcc;
  --titles-light-90: #ffffffe5;
  --titles-light-100: #ffffffff;

  --text-dark-10: #686b8019;
  --text-dark-20: #686b8033;
  --text-dark-30: #686b804c;
  --text-dark-40: #686b8066;
  --text-dark-50: #686b807f;
  --text-dark-60: #686b8099;
  --text-dark-70: #686b80b2;
  --text-dark-80: #686b80cc;
  --text-dark-90: #686b80e5;
  --text-dark-100: #686b80ff;

  --text-light-10: #ffffff19;
  --text-light-20: #ffffff33;
  --text-light-30: #ffffff4c;
  --text-light-40: #ffffff66;
  --text-light-50: #ffffff7f;
  --text-light-60: #ffffff99;
  --text-light-70: #ffffffb2;
  --text-light-80: #ffffffcc;
  --text-light-90: #ffffffe5;
  --text-light-100: #ffffffff;


  --surface-dark: #3d3d59;

  --surface-dark-10: #3d3d5919;
  --surface-dark-20: #3d3d5933;
  --surface-dark-30: #3d3d594c;
  --surface-dark-40: #3d3d5966;
  --surface-dark-50: #3d3d597f;
  --surface-dark-60: #3d3d5999;
  --surface-dark-70: #3d3d59b2;
  --surface-dark-80: #3d3d59cc;
  --surface-dark-90: #3d3d59e5;
  --surface-dark-100: #3d3d59ff;


  --surface-mute-dark: #3d3d59;
  --surface-neutral: #f7f8f7;

    --surface-neutral-10: #f7f8f719;
  --surface-neutral-20: #f7f8f733;
  --surface-neutral-30: #f7f8f74c;
  --surface-neutral-40: #f7f8f766;
  --surface-neutral-50: #f7f8f77f;
  --surface-neutral-60: #f7f8f799;
  --surface-neutral-70: #f7f8f7b2;
  --surface-neutral-80: #f7f8f7cc;
  --surface-neutral-90: #f7f8f7e5;
  --surface-neutral-100: #f7f8f7ff;


  --surface-mute-grey: #ffffff;
  --surface-light: #fafdfa;

  --surface-light-10: #fafdfa19;
  --surface-light-20: #fafdfa33;
  --surface-light-30: #fafdfa4c;
  --surface-light-40: #fafdfa66;
  --surface-light-50: #fafdfa7f;
  --surface-light-60: #fafdfa99;
  --surface-light-70: #fafdfab2;
  --surface-light-80: #fafdfacc;
  --surface-light-90: #fafdfae5;
  --surface-light-100: #fafdfaff;


  --primary-color: #ff5900;
  --primary-color-hover: #ff5900;
  --primary-color-gradient: #ff5900;
  --primary-color-10: #ff590019;
  --primary-color-20: #ff590033;
  --primary-color-30: #ff59004c;
  --primary-color-40: #ff590066;
  --primary-color-50: #ff59007f;
  --primary-color-60: #ff590099;
  --primary-color-70: #ff5900b2;
  --primary-color-80: #ff5900cc;
  --primary-color-90: #ff5900e5;
  --primary-color-100: #ff5900ff;


  --secondary-color: #7357ff;
  --secondary-color-hover: #7357ff;
  --secondary-color-gradient: #7357ff;
  --secondary-color-10: #7357ff19;
  --secondary-color-20: #7357ff33;
  --secondary-color-30: #7357ff4c;
  --secondary-color-40: #7357ff66;
  --secondary-color-50: #7357ff7f;
  --secondary-color-60: #7357ff99;
  --secondary-color-70: #7357ffb2;
  --secondary-color-80: #7357ffcc;
  --secondary-color-90: #7357ffe5;
  --secondary-color-100: #7357ffff;


  --tertiary-color: #02c7b1;
  --tertiary-color-hover: #02c7b1;
  --tertiary-color-gradient: #02c7b1;
  --tertiary-color-10: #02c7b119;
  --tertiary-color-20: #02c7b133;
  --tertiary-color-30: #02c7b14c;
  --tertiary-color-40: #02c7b166;
  --tertiary-color-50: #02c7b17f;
  --tertiary-color-60: #02c7b199;
  --tertiary-color-70: #02c7b1b2;
  --tertiary-color-80: #02c7b1cc;
  --tertiary-color-90: #02c7b1e5;
  --tertiary-color-100: #02c7b1ff;


  --quaternary-color: #ed9200;
  --quaternary-color-hover: #ed9200;
  --quaternary-color-gradient: #ed9200;
  --quaternary-color-10: #ed920019;
  --quaternary-color-20: #ed920033;
  --quaternary-color-30: #ed92004c;
  --quaternary-color-40: #ed920066;
  --quaternary-color-50: #ed92007f;
  --quaternary-color-60: #ed920099;
  --quaternary-color-70: #ed9200b2;
  --quaternary-color-80: #ed9200cc;
  --quaternary-color-90: #ed9200e5;
  --quaternary-color-100: #ed9200ff;

}