:root {
  /* font family */
  --ff-body: "Roboto", sans-serif;
  --ff-heading: "Roboto", sans-serif;
  --fw-body: 400;
  /* font size */
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-h6: 1.125rem;
  --fs-h5: 1.25rem;
  --fs-h4: 1.75rem;
  --fs-h3: 2.25rem;
  --fs-h2: 2.75rem;
  --fs-h1: 3.25rem;
  --fs-3xl: 2.5rem;
  
  /* Text sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-5xl: 3rem;

  
  /* Theme template color setting */
  --clr-body: var(--clr-black);
  --clr-primary: var(--clr-black);
  --clr-black: var(--clr-black);
  --clr-black-400: var(--clr-neutral-700);
  --clr-gray: var(--clr-neutral-100);
  --clr-white: var(--clr-white);
  --clr-white-400: color-mix(in srgb, var(--clr-neutral-300) 40%, transparent);
  --shadow-drodpown: 0px 153px 61px color-mix(in srgb, var(--clr-black) 1%, transparent), 0px 86px 52px color-mix(in srgb, var(--clr-black) 5%, transparent), 0px 38px 38px color-mix(in srgb, var(--clr-black) 9%, transparent), 0px 10px 21px color-mix(in srgb, var(--clr-black) 10%, transparent);

  /* border radius */
  --rounded: 0.25rem;
  --rounded-full: 100%;
  --rounded-sm: 0.125rem;
  --rounded-md: 0.375rem;
  --rounded-lg: 0.5rem;
  --rounded-xl: 0.75rem;
  --rounded-2xl: 1rem;
  --rounded-3xl: 1.5rem;
  --rounded-4xl: 2rem;
  --rounded-5xl: 2.5rem;
}