:root {
  --font-family: "Onest", sans-serif;

  /* Neutral */
  --neutral-100: #0A0A0A;
  --neutral-90: #424242;
  --neutral-80: #616161;
  --neutral-70: #757575;
  --neutral-60: #9E9E9E;
  --neutral-50: #C2C2C2;
  --neutral-40: #E0E0E0;
  --neutral-30: #EDEDED;
  --neutral-20: #F5F5F5;
  --neutral-10: #FFFFFF;

  /* Primary */
  --primary-100: #0A0C19;
  --primary-90: #282DAD;
  --primary-80: #2229CF;
  --primary-70: #D0DDF7;
  --primary-60: #EAF1FF;

  /* Secondary */
  --secondary-100: #8E90D5;
  --secondary-90: #C3C6EB;
  --secondary-80: #D8DBF5;
  --secondary-70: #E9EBF3;
  --secondary-60: #F7F8FC;

  /* Success */
  --success-100: #164C3F;
  --success-90: #1B5F4E;
  --success-80: #21725E;
  --success-70: #B5D0C9;
  --success-60: #C8EBE2;
  --success-50: #E7FAF5;

  /* Warning */
  --warning-100: #95891D;
  --warning-90: #BBAC25;
  --warning-80: #E0CE2C;
  --warning-70: #F5EFB9;
  --warning-60: #FDF8CF;
  --warning-50: #FEFADC;

  /* Danger */
  --danger-100: #541212;
  --danger-90: #8C1F1F;
  --danger-80: #A82525;
  --danger-70: #E2B6B6;
  --danger-60: #FFDFDF;
  --danger-50: #FFE8E8;

  /* Gradients */
  --gradient-1: linear-gradient(var(--primary-70), var(--secondary-90));
  --gradient-2: linear-gradient(var(--primary-60), var(--secondary-80));
  --gradient-3: linear-gradient(var(--primary-60), var(--secondary-60));

  --overlay: #0A0C19;

  /* Heading SemiBold */
  --h1-size: 48px;
  --h1-line: 52px;
  --h2-size: 32px;
  --h2-line: 40px;
  --h3-size: 28px;
  --h3-line: 36px;
  --h4-size: 24px;
  --h4-line: 28px;
  --h5-size: 20px;
  --h5-line: 24px;

  /* Body */
  --body-14-size: 14px;
  --body-14-line: 16px;
  --body-16-size: 16px;
  --body-16-line: 24px;
  --body-20-size: 20px;
  --body-20-line: 24px;

  /* Label */
  --label-12-size: 12px;
  --label-12-line: 14px;
  --label-14-size: 14px;
  --label-14-line: 18px;
  --label-16-size: 16px;
  --label-16-line: 18px;
  --label-18-size: 18px;
  --label-18-line: 20px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Shadow */
  --shadow-2: 0 2px 4px #0000001F;
  --shadow-4: 0 4px 8px #0000001A;
  --shadow-6: 0 6px 12px #0000001A;
  --shadow-8: 0 8px 16px #00000014;
}