:root {
  // font family declaration
  --td-ff-body: 'ClashGrotesk-Variable';
  --td-ff-fontawesome: "Font Awesome 6 Pro";
  --td-ff-icomoon: "icomoon";

  // color declaration

  // Common Color
  --td-white: hsl(0, 0%, 100%);
  --td-black: hsl(0, 0%, 0%);
  --td-placeholder: hsla(0, 0%, 0%, 0.5);
  --td-selection: hsl(0, 0%, 0%);

  // Heading Color
  --td-heading: #0E0E11;

  // Theme Color
  --td-primary: #6427DA;
  --td-secondary: #A171FF;
  --td-tertiary: #F9BC15;

  // Text Color
  --td-text-primary: #BDBDC0;

  // Others Color
  --td-warning: #FFA336;
  --td-success: #85FFC4;
  --td-danger: #FF3E3E;
  --td-green: #80ED99;
  --td-retro-lime: #14BF8C;

  //font weight declaration
  --td-fw-normal: normal;
  --td-fw-thin: 100;
  --td-fw-elight: 200;
  --td-fw-light: 300;
  --td-fw-regular: 400;
  --td-fw-medium: 500;
  --td-fw-sbold: 600;
  --td-fw-bold: 700;
  --td-fw-ebold: 800;
  --td-fw-black: 900;

  // font size declaration
  --td-fs-body: 16px;
  --td-fs-p: 16px;
  --td-fs-h1: 60px;
  --td-fs-h2: 48px;
  --td-fs-h3: 38px;
  --td-fs-h4: 32px;
  --td-fs-h5: 24px;
  --td-fs-h6: 20px;
}