:root {
  /* z-index */
  --z-index-0: 0;
  --z-index-1: 100;
  --z-index-2: 200;
  --z-index-3: 300;
  --z-index-4: 400;
  --z-index-5: 500;
  --z-index-6: 600;
  --z-index-7: 700;
  --z-index-8: 800;
  --z-index-9: 900;
  --z-index-10: 1000;
  --z-index-top: 9999;

  /* Font-family */
  --font-family: "Poppins", Helvetica, Arial, sans-serif;

  /* Font-weight */
  --light: 300;
  --regular: 400;
  --medium: 500;
  --semi-bold: 600;
  --bold: 700;
  --extra-bold: 900;

  /* Font-size | base size = 16px */
  --font-double: 2rem;
  --font-xxl: 1.5rem;
  --font-xl: 1.25rem;
  --font-lg: 1.125rem;
  --font-base: 1rem;
  --font-sm: 0.875rem;
  --font-xs: 0.75rem;
  --font-xxs: 0.625rem;

  /* Base colors */
  --white: #ffffff;
  --black: #000000;
  --green: #29c369;
  --green-d10: #209952;
  --green-d30: #0e4525;
  --green-l35: #b0eeca;
  --red: #e45548;
  --red-d10: #d92f20;
  --red-l35: #fbe5e4;
  --yellow: #fabb05;
  --yellow-l35: #fdebb4;
  --orange: #f5a623;
  --pink: #ec407a;
  --cyan: #26c6da;
  --lime: #c0ca33;
  --purple: #ab47bc;
  --indigo: #3f51b5;

  /* Text colors */
  --text: #000000;
  --text-a60: rgba(0, 0, 0, 0.6);
  --text-a40: rgba(0, 0, 0, 0.4);

  /* Primary colors */
  --primary: #2c97ff;
  --primary-d10: #007ef8;
  --primary-d30: #004a92;
  --primary-l35: #deefff;

  /* Secondary colors */
  --secondary: #fabb05;
  --secondary-d10: #c89604;

  /* Background colors */
  --bg-primary: var(--white);
  --bg-secondary: #f5f5f5;
  --bg-secondary-d3: #f2f2f2;
  --bg-secondary-d5: #ededed;
  --bg-secondary-d10: #e0e0e0;

  /* Gradient */
  --primary-gradient: #dceeff;
  --secondary-gradient: #ffebb2;

  --gradient-hero: linear-gradient(
    -23deg,
    var(--primary-gradient) 0%,
    var(--secondary-gradient) 100%,
    var(--secondary-gradient) 100%
  );
  --gradient-section: linear-gradient(
    183deg,
    var(--primary-gradient) 0%,
    var(--secondary-gradient) 94%,
    var(--secondary-gradient) 94%
  );
  --gradient-start: linear-gradient(
    0deg,
    var(--bg-secondary) 11%,
    var(--primary-gradient) 100%
  );
  --gradient-end: linear-gradient(
    0deg,
    var(--primary-gradient) 11%,
    var(--bg-secondary) 100%
  );

  /* Input colors */
  --input-bg: var(--white);
  --input-border: var(--text-a40);
  --input-border-hover: var(--text);

  /* Status colors */
  --success: var(--green);
  --warning: var(--yellow);
  --error: var(--red);

  /* Shadow */
  --shadow-dp4-nav: 0 2px 2px 0 rgba(0, 0, 0, 0.13), 0 0 0 0 rgba(0, 0, 0, 0.11);
  --shadow-dp4: 0 1px 3px 0 rgba(0, 0, 0, 0.13), 0 0 0 0 rgba(0, 0, 0, 0.11);
  --shadow-dp8: 0 3px 7px 0 rgba(0, 0, 0, 0.13), 0 0 1px 0 rgba(0, 0, 0, 0.11);
  --shadow-dp16: 0 6px 14px 0 rgba(0, 0, 0, 0.13),
    0 1px 3px 0 rgba(0, 0, 0, 0.11);
  --shadow-dp64: 0 25px 57px 0 rgba(0, 0, 0, 0.22),
    0 4px 14px 0 rgba(0, 0, 0, 0.18);
  --shadow-text-dp4: 0 1px 3px rgba(0, 0, 0, 0.13), 0 0 0 rgba(0, 0, 0, 0.11);

  --shadow-1: 0 4px 14px 5px rgba(0, 0, 0, 0.04);
  --shadow-2: 0 20px 20px 0 rgba(0, 0, 0, 0.08);
  --shadow-3: 0 2px 40px 0 rgba(0, 0, 0, 0.08);
  --shadow-btn: 0 2px 10px 0 rgba(199, 199, 199, 0.5);

  /* Border radius */
  --radius-2: 0.125rem;
  --radius-4: 0.25rem;
  --radius-8: 0.5rem;
  --radius-16: 1rem;
  --radius-20: 1.25rem;

  /* Layout */
  --content-width-sm: 42rem;
  --content-width-md: 60rem;
  --content-width-lg: 68rem;
  --content-width-xxl: 80rem;

  --w-max-section: 88rem;
  --w-max-content: 88rem;
  --w-max-section-content: 73rem;
}